完成ページです。
http://naonmay06.s1002.xrea.com/p/

ソースコードは以下で公開しております。
https://github.com/naon56/wptemplate/tree/gh-pages/wp-test

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

そのうち、ちゃんとイチから作成したバージョンを紹介したいです(希望)。

※随時更新


WordPressの設置

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

WordPressの初期設定は以下のサイトを参考にしました。
WordPressを初導入したら まず最初にやるべき24の設定
WordPressの設定で最初にやること
【WordPress】投稿記事を自動保存するリビジョン機能を停止する方法

使用するプラグインは以下のページを参考にしました。
ただ、最新のWordPressでは動作しないものもあります。
ブログ運営の参考に!Naifixで愛用しているWordPressプラグイン31個
WordPressのおすすめプラグインは8つだけ。断言します
プラグインは20を超えないようにしています。
プラグインをインストールした時に別のプラグインに悪影響を及ぼすことが多々ありましたので。

記事は以前Livedoorブログで書いていた内容をインポートしました。
ライブドアブログからWordPressへの移行(引越し)全ステップを解説

サイトマップは以下を参考にして「PS Auto Sitemap」を選びました。
WordPressのHTMLサイトマップを自動生成するプラグイン6選

パンくずリストは以下を参考に「Breadcrumb NavXT」を選びました。
Breadcrumb NavXTプラグインの使い方
【SEO対策にもなる!】WordPressでパンくずリストを表示できるプラグイン3選

アクセス解析は以下のサイトの「2.WordPressにGoogle Search Console(ウェブマスターツール)を設置する」までを実施しました。
WordPressに必要なアクセス解析を15分で設置しよう

外部SNS連携は以下を参考に「Jetpack(WPプラグイン)」を選びました。
『WordPress×SNS』自動投稿ツールまとめ


テンプレートの自作

まず、以下のページで、全体の流れを把握しました。
WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと
私はローカルに環境を作成せず、レンタルサーバーでいきなり実行しました。

以下のサイトで、テンプレートの作成方法を勉強しました。
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

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

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

フッターのカスタマイズは以下を参考にしました。
WordPress フッターメニューの作成と追加
フッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法

【WordPress】任意のテンプレートパーツを読み込む関数[get_template_part() ;]の使い方。
WordPressサイトのフッターにウィジェットを追加する

トップに戻るボタンは以下を参考にしました。
WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方

SNSボタンの設置は以下を参考にしました。
コピペで使える固定ソーシャルボタンBOX

テンプレートの翻訳は以下のページを参考にしました。
自作WordPressテーマの国際化(翻訳)の方法

以下を参考に、「Multi Device Switcher」を使って、デバイスごとにテーマを作成することにしました。
スマホでPC表示が可能に!デバイスごとにテーマを切り替えれるWordPressプラグイン「Multi Device Switcher」

フィーチャーフォンとスマートフォンのサイトの作り方は以下を参考にしました。
WordPressを複数インストールし、携帯サイト・スマートフォン用サイトを個別に作成する方法

スマートフォンとタブレットのナビゲーションバーの表示は以下のサイトを参考にしました。
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
プラグインは使わずスマホのメニューに実装 jQuery 水平スライドメニュー

スマホとタブレットとゲーム機の表示確認は以下を参考にChromeと実機(iPhone、iPad mini、ニンテンドー3DS)を使いました。
スマホのブラウザチェックはChromeのツールが便利
フィーチャーフォンは以下のサイトで確認しました。
サイトビューワ - gooモバイル

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


参考
WordPressのアクションフックの種類と実行順
WordPressで問い合わせフォームを設置する方法【初心者向け】
WordPress:WordPressで固定ページの表示順を変更する
QRのススメ
WordPressでソーシャルボタンを追加する方法【初心者向け】
Twitter Apps
https://blog.codecamp.jp/wordpress_plugin_for_access
ストリング翻訳が表示されない理由は何ですか?
WordPress と Facebook を効果的に連携させるための4つの方法
【プログラミング不要】WordPressとFacebookを連携して自動投稿する方法【ifttt】
WordPressとFaceBook、Twitter連携プログラムが便利すぎる件
WordPressとGoogle+を連携するためにやっておくべき3つのコト
WordPressの新着記事をFacebookに自動投稿する方法
WordPressの設定で最初にやること
WordPress の Ktai Style を PHP 7 で動作するように修正した
Webサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版
レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました
ブログにTwitterやFacebook、はてブ等SNSのシェアボタンを設置する方法と手順
LINEで送るボタン設置方法|WordPressやMovabletypeなど各ブログにも
フッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法
iOS で click イベントがわけのわからない動作をする件について
スタイルシートだけでFont Awesomeのアイコンを表示する


----------


Twitterやっています。ぜひチェックしてみてください。


ブログランキングに参加してます。よろしければポチっとお願いします。
ブログランキング・にほんブログ村へにほんブログ村
人気ブログランキング