WordPresを設置してテンプレートを自作してみました【手順】

2017年9月16日WordPressテーマ, プログラミング, ワードプレス

完成ページはこのブログです。ソースコードは以下で公開しております。
https://github.com/naon56/wptemplate/tree/gh-pages/wp-test

HTML、CSS、PHP、WordPressともに初心者ではないので、ざっくりとした説明ですみません……。その他参考にさせていただいたサイトは参考にまとめてあります。

そのうち、ちゃんとイチから作成したバージョンを紹介したいです（希望）。
※随時更新

WordPressの設置手順

WordPressのプラグインは、管理画面内のプラグイン検索ではなく、以下のサイトで検索してダウンロードしたものをアップロードして使用しました。管理画面内の検索では時間がかかるためです。

WordPressの初期設定は以下のサイトを参考にしました。

使用するプラグインは以下のページを参考にしました。ただ、最新のWordPressでは動作しないものもあります。

プラグインは20を超えないようにしています。プラグインをインストールした時に別のプラグインに悪影響を及ぼすことが多々ありましたので。

記事は以前Livedoorブログで書いていた内容をインポートしました。

サイトマップは以下を参考にして「PS Auto Sitemap」を選びました。

パンくずリストは以下を参考に「Breadcrumb NavXT」を選びました。

アクセス解析は以下のサイトの「２．WordPressにGoogle Search Console（ウェブマスターツール）を設置する」までを実施しました。

外部SNS連携は以下を参考に「Jetpack（WPプラグイン）」を選びました。

テンプレートの自作の手順

まず、以下のページで、全体の流れを把握しました。

私はローカルに環境を作成せず、レンタルサーバーでいきなり実行しました。以下のサイトで、テンプレートの作成方法を勉強しました。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）

phpの構文チェックは以下のサイトを使用しました。

CSSは以下のリファレンスを使用しました。

フッターのカスタマイズは以下を参考にしました。

トップに戻るボタンは以下を参考にしました。

SNSボタンの設置は以下を参考にしました。

テンプレートの翻訳は以下のページを参考にしました。

以下を参考に、「Multi Device Switcher」を使って、デバイスごとにテーマを作成することにしました。

フィーチャーフォンとスマートフォンのサイトの作り方は以下を参考にしました。

スマートフォンとタブレットのナビゲーションバーの表示は以下のサイトを参考にしました。

プラグインは使わずスマホのメニューに実装 jQuery 水平スライドメニュー

スマホとタブレットとゲーム機の表示確認は以下を参考にChromeと実機（iPhone、iPad mini、ニンテンドー3DS）を使いました。

フィーチャーフォンは以下のサイトで確認しました。

不明な単語はその都度Google先生で検索しました。最後にTheme Check プラグインでチェックしました。

参考記事

iOS で click イベントがわけのわからない動作をする件について

2017年9月16日WordPressテーマ, プログラミング, ワードプレス

Posted by ナオ