WordPress（初級）タブに書かれているドキュメントは兎にも角にもWordPressを立ち上げる事だけを目指したコンテンツです。
しかし、このタブではWordPressで判った事をベースにコンテンツを作成しています。
よってこれらのドキュメントを理解する為にはCSSの知識に加えて、
・phpの知識
・ファンクションの知識
・jqueryの知識
が必要になります。
しかし、下記のドキュメントを順番通り読めば徐々にこれらの事も理解して頂けると思っています。
1.子テーマの作成と事前準備
1.子テーマの設定方法
以前のやり方は親テーマのCSSをコピーして修正する方法を取っていましたが、このやり方はあまり綺麗ではありません。
そこで親テーマと子テーマを明確に区分して管理する方法をここで解説しています。
2.サイトでアイコンフォントを使える様にする。
Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。
またWordPress自体もアイコンフォントを持っています。
ここでは、これらの使い方を解説しています。
2.ビジュアルエディタを使い易くカスタマイズする
ビジュアルエディタを自分に合った形に変更する為には色々変更する必要があります
下記カテゴリに分けて解説していきます。
2-1.ビジュアルエディタの基本設定
1.ビジュアルエディタを理解する
WordPressの基本形は、ブログ作成ツールです。
その為には記事をどの様に書くのか？が重要になり、そこに登場するのがエディタです。
私がWordPressを始めた頃はこのエディタに「ビジュアルエディタ」が使われていたのですが、現在は「ブロックエディタ」が標準となってしましました。
下記ドキュメントはWordPressのデフォルトテーマの中での「ビジュアルエディタ」と「ブロックエディタ」の現状を解説しています。
2.TinyMCE Advancedのスタイルの制限と回避方法
ビジュアルエディタでは「TinyMCE Advanced」の利用が推奨されており、本サイトでもこれを利用しています。
このプラグインの最大特徴はユーザ指定の「スタイル」が定義できる事です。
これを利用する事により複雑なhtmlもビジュアルエディタで記述できるようになります。
しかし親テーマのビジュアルエディタのCSSが「editor-style.css」か否かで少し設定方法が異なります。
下記にどの様に設定するか？を解説します。
親テーマが「editor-style.css」の時のスタイル機能の使い方
親テーマが「editor-style.css」以外の時のスタイル機能の使い方
3.ビジュアルエディタとHTTP表示を一致させる方法
ビジュアルエディタで設定したスタイルをHTTP表示でも反映させる為には両方のCSSを同一にする必要があります。ここではこれを実現する具体的な方法を解説しています。
4.Bootstrapの導入方法と設定
Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。
ここでは、このBootstrapのダウンロードと、HTTP画面やビジュアルエディタで使う設定方法を解説しています。
5.TinyMCEにダッシュアイコンのボタンを追加する
ビジュアルエディタ内で使うアイコンは限られています。
そこでプラグインでアイコンを追加するのではなく、ビジュアルエディタのコマンドの一つとしてアイコンボタンを追加する方法を解説します。
6.CSSのフォントとフォントサイズの設定
CSSの基本設定する時、このサイトはどのフォントを使えば良いか？またレスポンシブデザインを考えた場合フォントサイズをどうするか？が悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、新しいサイトはこの辺を意識したサイトにしました。
2-2.ビジュアルエディタのタグをカスタマイズする
1.TinyMCEの基本スペックとインデント方法の変更
デフォルトのビジュアルエディタのインデントはp要素と画像しかできません。
またCSSを更新しても「スーパーリロード」しないと画面が変わらない等の問題があります。
これらを解決する方法をここで解説しています。
ビジュアルエディタでインデント（margin-left）が利用できる様にする
2.見出し、本文、URL設定と使い方
ここではドキュメントを作成する場合の基本項目の設定と使い方を解説しています。
特にURLリンクについてはビジュアルエディタでドキュメント内のリンクの張り方も解説しています。
ビジュアルエディタの見出し（h2）等を自由にカスタマイズする
3.OL,UL要素に変わる新しいLIST要素の追加
TinyMCEではリストとして、オーダリスト<ol>とアンオーダーリスト<ul>が用意されていますが、決して使い易いものではありません。
そこでこのサイトでは半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。
ビジュアルエディタにインデント可能なリスト（OL,UL）を作成する
4.整形済みテキストの設定と使い方
ここでは整形済みテキストと引用の設定と使い方を解説しています。
ビジュアルエディタのプログラムBOX（pre）をカスタマイズする
5.引用BOXの設定と使い方
TinyMCEがデフォルトで提供している引用BOXはあまり見栄えが良くありません。
そこでここでは見栄えをを良くする設定と使い方を解説しています。
ビジュアルエディタの引用BOX（blockquote）をカスタマイズする
6.イメージの設定とレスポンシブ対応
TinyMCEで画像を取り扱うポイントは、
画像に枠を付ける場合にどうするのか？と
画像のレスポンシブ化をどう実現するか？(スマホ対応の時に重要です)になります。
ここではこれらの設定方法と使い方を解説しています。
７.TinyMCEで綺麗な表を作る
PCで表を作成し、それをタブレットやスマホで表示すると表が綺麗に収まりません。
また基本機能だけでは表の枠線や色を綺麗に表示できません。
そこでこれらを解決する為にBootstrap機能を使った表作成方法を解説しています。
ビジュアルエディタの表機能（table）をカスタマイズする
8.ビジュアルエディタにボタン機能を追加する。
ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここではBootstrapのボタンクラスを追加して、ボタン作成ができる様にしています。
2-3.ビジュアルエディタに新要素を追加する
ここからはビジュアルエディタの機能を拡張しより複雑なhtmlが記述できる様にしていきます。
1.ビジュアルエディタでリンクBOXを作成する方法
ここではビジュアルエディタの「表機能」と「スタイル」を使ってリンクBOXを作成する方法を解説しています。
ビジュアルエディタにBOX全体がリンク対象（リンクBOX）を実装する
2.ビジュアルエディタで＜Enter＞が使えるBOXを作成する方法
TinyMCE Advancedの「スタイル」機能は1つの段落に対する定義になります。
よってこの「スタイル」機能で作成したBOXでは、段落変更(Enter)は利用できません。
しかしショートコードという新しい概念を導入すると、段落変更(Enter)が使える新しいタイプのBOXを作成する事が可能となります。
ビジュアルエディタに＜Enter＞が使えるメモBOXを実装する
3.TinyMCEにタブ機能を実装する。
ここではビジュアルエディタでタブを使ったコンテンツを作成する方法を解説しています。
これができるとサイト訪問者は、このタブを切替えるだけで必要な情報を簡潔に読むことが可能となります。
4.TinyMCEにBootstrapのコラップス機能を実装する。
コラップスとはアコーディオンのようにコンテンツを開閉できる機能で、ここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。
ビジュアルエディタにコラップス機能（コンテンツの開閉）を実装する。
5.モーダルウィンドウ
モーダルウィンドウとは、コンテンツを新しいウィンドウで表示し、特定の操作なしには元の画面に戻らない機能で、ここではビジュアルエディタでこの機能を利用する方法を解説しています。
3.レスポンシブWebデザインとは
レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、今回のサイト改定ポイントはここにあります。
このデバイスの判断処理を①CSSで行う方法と②PHPプログラムで行う方法があります。
以下に2つに分けて解説していきます。
CSSで実現するレスポンシブWebデザイン
1.BootstrapとFlexboxの特徴と違い
CSSで実現するレスポンシブWebデザインで有名なのはBootstrapとFlexboxがあります。
ここではそれらの特徴と違いを解説しています。
2.Flexboxを使った画面コントロール
Flexbox(Flexible Box Layout Module)はフレキシブルなレイアウトが組めるCSS3のレイアウトモジュールですが、これを使いこなす為にはFlexboxのプロパティを理解する必要があります。
ここでは具体的な事例を使いながらこのプロパティの全容を解説しています。
PHPで表示デバイスを事前に知る方法
レスポンシブWebデザインはCSSでコントロールするのが基本ですが、phpプログラム側で事前に表示デバイスや表示画面サイズが判っているとプログラムがもっと簡単になります。
そこでPHP側でこれらを取得する方法を解説します。
1.表示デバイスを取得する方法
WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。
ここではこの設定方法と使い方を解説しています。
2.画面サイズを取得する方法
WordPressで画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラムを作る③ajaxからのデータを受け取るphpプログラムを作る事が必要になります。
ここではWordpressに独自のajax経路を使った方法で上記を実現する方法を解説しています。
3.表示デバイスと画面サイズの両方を使った判断方法
サーバ側で表示デバイスを判断する方法は①デバイス種類を取得する。②デバイスの画面サイズを取得する。がありますが、各々に制限があります。そこでこの両方を使った表示デバイスの判断関数の作り方を解説しています。
4.ヘッダの作成方法
1.Bootstrapのナビゲーション・バーの機能を使う
Bootstrapのナビゲーション・バーを使って下記を実現する方法を解説しています。
・PCでは横に並んだ綺麗なメニュにしたい。
・しかしスマホはメニュをボタン化しONの時だけメニュを表示させる。
2.Bootstrapを使った検索ボタンの作成
Bootstrapのインプットグループ機能を使ってカラフルな検索ボタンを作成する方法を解説しています。
3.自作のパンくずを作成する
ヘッダの最後はパンくずです。
パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。
そこでここでは自作のパンくずを作る方法を解説しています。
4.Flexboxを使ったヘッダの作成方法
ヘッダに表示する部品が揃いましたので、FlexBOX機能を使ったヘッダ作成方法を解説しています。
5.本文領域で使用する部品の作成
1.スマホ対応のサイドバープログラムの作成
PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できません。
そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。
2.自作のページネーションを作成する
ページネーションは一般的にプラグインを使うケースが多いですが、このサイトでは独自のページネーションを作成しています。
しかしカテゴリページ等では上記の関数を指定するだけで良いのですが、投稿ページにページネーションを設定する為には、それ以外にやらなければならない事があります。
上記のページネーションは新しいページのURLをコールする事により、次のページを表示しています。
よって新しい画面は先頭に戻ります。
これはカテゴリページでは問題ないのですが投稿ページの下に関連ドキュメントを表示する場合、先頭に戻ってしまうと思考パターンの中断がおこります。
この様な問題を解決する為には、Jqueryを使ったページネーションが必要になります。
3.画像圧縮
画像が多いサイトを作成するとどうしても表示スピードが遅くなります。
この対策の一つとして画像を圧縮する方法があります。
画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & PNG images」の使い方を紹介します。
Compress JPEG & PNG imagesで画像を圧縮する。
6.本文領域を作成する
本文領域の表示プログラムには、固定ページ、投稿ページ、検索等の一覧リスト表示があります。
1.固定ページをデザインする
固定ページは本文領域だけを表示させています。
2.投稿ページをデザインする
投稿ページは左に本文領域、右にサイドバーを配置しています。
更にサイドバーは、スマホの場合はドロップダウンメニュとして表示させています。
3.リストページをデザインする
リストページにはカテゴリページとアーカイブページ及び検索結果リストがあります。
表示形式は投稿ページと同じデザインですが、リストですのでページ送り機能を加えています。
7.フッタを作成する
1.フッタを作成する
フッターも固定ページや投稿ページに合ったフッタにしています。
8.メール送信
1.WordPressからメールを送れる様にする。
GmailのSMTPを経由してメールを送る方法には下記の様な方法があります。
①「Gmail SMTP」プラグインを利用する方法
Gmail SMTPプラグインで、GmailのSMTPからメールを送る方法
これが「Gmail API」を使う正規な方法です。
②「WP-Mail-SMTP」プラグインを利用する方法
WP-Mail-SMTPを「Gmailのアプリパスワード」で利用する方法
特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告メッセージがでます。
WP-Mail-SMTPを「Gmail API」で利用する方法
特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。
2.独自のメール送信プログラムを作成する
ここではメール作成画面を独自プログラムで作成する方法を解説しています。
また独自プログラムなので問い合わせがした人のメールアドレスを「Reply-To」に指定する事により、Gmailからの返信を容易にしました。
9.php7.3への対応
PHPのバージョンを挙げるとスピードが速くなる！というメリットがあります。
このサイトではPHP7.0からPHP7.3に挙げた時の問題点と解決方法を解説していきます。
「PHP Compatibility Checker」のエラー対策
旧ドキュメント
1.TinyMCEにBootstrapのモーダルウィンドウを実装する。
ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで利用する方法を解説しています。
しかしこの方法ではモーダルウィンドウを設定する事ができるのは1ページに1個です。
よってあまり良い方法ではないのですがBootstrapのモーダルウィンドウ機能を理解する上のドキュメントとして残しておきます。
TinyMCEにBootstrapのモーダルウィンドウを実装する。
2.TinyMCEに自作のモーダルウィンドウを実装する。
ここでは自作のモーダルウィンドウの作り方を解説していますが、モーダルウィンドウを設定する事ができるのは1ページに1個です。
但し、モーダルウィンドウを操作する基本形としてこのドキュメントを残しておきます。