HOME  /WordPress(応用編)
2018年01月19日

2年前に立ち上げたこのサイトは、私もWordPressが初めてでしたので兎にも角にも立ち上げる事だけを目標としたサイトでした。

旧サイトはテンプレートに「Twentytwelve」を利用しましたが下記の問題点がありました。

①PCをベースとしたサイトで、タブレットやスマホ対応ができてない。

②TynyMCEは使っていたが、まだまだ初期レベルの使い方で「ビジュアルエディタのみで総てのコンテンツを作成する」レベルには至って無かった。

そこで今回のサイトは「Twentytwelve」は使っているが独自サイトに近い物となり下記の特徴を持っています。

①ページデザインはFlexboxを使って「PC」,「タブレット」,「スマホ」にフィットするデザインとしました。

②また総てのコンテンツをTinyMCEを使って作成する為にBootstrapの部品とFlexboxを組み合わせてこれを実現しました。

この新サイトを理解する為にはCSSの知識に加えて、

・phpの知識

・ファンクションの知識

・jqueryの知識

が必要になりますが下記のドキュメントを順番通り読めば徐々にこれらの事も理解して頂けると思っています。

以下にその概要を説明します。

1.子テーマの作成と事前準備

1-1.子テーマの設定方法

以前のやり方は親テーマのCSSをコピーして修正する方法を取っていましたが、このやり方はあまり綺麗ではありません。そこで親テーマと子テーマを明確に区分して管理する方法をここで解説しています。

­ ­子テーマの設定方法

1-2.TinyMCEのeditor-style.cssの制限と回避方法

親テーマがeditor-style.cssを持つテーマの場合、子テーマで定義したスタイル以外のスタイルが表示され操作性を阻害します。ここではこれを回避する方法を解説しています。

­ ­TinyMCEのeditor-style.cssの制限と回避方法

1-3.ビジュアルエディタとHTTP表示を一致させる方法

ビジュアルエディタで設定したスタイルをHTTP表示でも反映させる為には両方のCSSを同一にする必要があります。ここではこれを実現する具体的な方法を解説しています。

­ ­ビジュアルエディタとHTTP表示を一致させる方法

1-4.Bootstrapの導入方法と設定

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。

ここでは、このBootstrapのダウンロードと、HTTP画面やビジュアルエディタで使う設定方法を解説しています。

­ ­Bootstrapの導入方法と設定

1-5.CSSのフォントとフォントサイズの設定

CSSの基本設定する時、このサイトはどのフォントを使えば良いか?またレスポンシブデザインを考えた場合フォントサイズをどうするか?が悩ましい所です。

以前のサイトはあまり意味もわからず作成しましたが、新しいサイトはこの辺を意識したサイトにしました。

­ ­CSSのフォントとフォントサイズの設定

1-6.WordPressのアイコンフォントを使える様にする。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。

これに加えてWordPressもアイコンフォントを持っています。

ここではWordPressのアイコンフォントを使える様にする事と、これらの使い方を解説しています。

­ ­WordPressのアイコンフォントを使える様にする。

2.レスポンシブWebデザインとは

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、今回のサイト改定ポイントはここにあります。

このデバイスの判断処理を①CSSで行う方法と②PHPプログラムで行う方法があります。

以下に2つに分けて解説していきます。

CSSで実現するレスポンシブWebデザイン

2-1.BootstrapとFlexboxの特徴と違い

CSSで実現するレスポンシブWebデザインで有名なのはBootstrapとFlexboxがあります。
ここではそれらの特徴と違いを解説しています。

­ ­BootstrapとFlexboxの特徴と違い

2-2.Flexboxを使った画面コントロール

Flexbox(Flexible Box Layout Module)はフレキシブルなレイアウトが組めるCSS3のレイアウトモジュールですが、これを使いこなす為にはFlexboxのプロパティを理解する必要があります。

ここでは具体的な事例を使いながらこのプロパティの全容を解説しています。

­ ­Flexboxを使った画面コントロール

PHPで表示デバイスを事前に知る方法

レスポンシブWebデザインはCSSでコントロールするのが基本ですが、phpプログラム側で事前に表示デバイスや表示画面サイズが判っているとプログラムがもっと簡単になります。

そこでPHP側でこれらを取得する方法を解説します。

2-3.表示デバイスを取得する方法

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。
ここではこの設定方法と使い方を解説しています。

­ ­表示デバイスを取得する方法

2-4.画面サイズを取得する方法

WordPressで画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラムを作る③ajaxからのデータを受け取るphpプログラムを作る事が必要になります。
ここではWordpressに独自のajax経路を使った方法で上記を実現する方法を解説しています。

­ ­画面サイズを取得する方法

2-5.表示デバイスと画面サイズの両方を使った判断方法

サーバ側で表示デバイスを判断する方法は①デバイス種類を取得する。②デバイスの画面サイズを取得する。がありますが、各々に制限があります。そこでこの両方を使った表示デバイスの判断関数の作り方を解説しています。

­ ­表示デバイスと画面サイズの両方を使った判断方法

3.ヘッダの作成方法

3-1.Bootstrapのナビゲーション・バーの機能を使う

Bootstrapのナビゲーション・バーを使って下記を実現する方法を解説しています。

・PCでは横に並んだ綺麗なメニュにしたい。

・しかしスマホはメニュをボタン化しONの時だけメニュを表示させる。

­ ­Bootstrapのナビゲーション・バーの機能を使う

3-2.Bootstrapを使った検索ボタンの作成

Bootstrapのインプットグループ機能を使ってカラフルな検索ボタンを作成する方法を解説しています。

­ ­Bootstrapを使った検索ボタンの作成

3-3.自作のパンくずを作成する

ヘッダの最後はパンくずです。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。

そこでここでは自作のパンくずを作る方法を解説しています。

­ ­自作のパンくずを作成する

3-4.Flexboxを使ったヘッダの作成方法

ヘッダに表示する部品が揃いましたので、FlexBOX機能を使ったヘッダ作成方法を解説しています。

­ ­Flexboxを使ったヘッダの作成方法

4.本文領域で使用する部品の作成

4-1.スマホ対応のサイドバープログラムの作成

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できません。

そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

­ ­スマホ対応のサイドバープログラムの作成

4-2.自作のページネーションを作成する

ページネーションは一般的にプラグインを使うケースが多いですが、このサイトでは独自のページネーションを作成しています。作成の考え方は下記になります。

①WordPressがデフォルトで持っているページネーションからli形式でデータを取得する。

②上記の取得データをBootstrapページネーションフォーマットで出力する。

­ ­スマホ対応のサイドバープログラムの作成

5.本文領域を作成する

本文領域の表示プログラムには、固定ページ、投稿ページ、検索等の一覧リスト表示があります。

5-1.固定ページをデザインする

固定ページは本文領域だけを表示させています。

­ ­固定ページをデザインする

5-2.投稿ページをデザインする

投稿ページは左に本文領域、右にサイドバーを配置しています。
更にサイドバーは、スマホの場合はドロップダウンメニュとして表示させています。

­ ­投稿ページをデザインする

5-3.リストページをデザインする

リストページにはカテゴリページとアーカイブページ及び検索結果リストがあります。

表示形式は投稿ページと同じデザインですが、リストですのでページ送り機能を加えています。

­ ­リストページをデザインする

6.フッタを作成する

6-1.フッタを作成する

フッターも固定ページや投稿ページに合ったフッタにしています。

­ ­フッタを作成する

7.ビジュアルエディタを使いこなす

子テーマの作成と事前準備で、本サイトのCSS構造は下記の様になっています。

  このサイトの設定 基本形
ビジュアル
エディタのCSS
my_editor-style.css editor-style.css
HTTP表示の
コンテンツ部分CSS
css¥editor-style.css style.css
HTTP表示の
一般設定CSS
css¥style.css style.css

よって以降の文書は、上記を前提に記載しています。

7-1.TinyMCEの基本スペックとインデント方法の変更

WordPressのビジュアルエディタを使い易くするためには一般的にTinyMCEプラグインを使うことが推奨されており、本サイトもこれを採用しています。

また、PCとスマホを共通コンテンツにする為にはインデントをうまく使ったコンテンツ作成が重要になります。

しかしTinyMCEのデフォルト設定ではこれができません。

これを解決する方法をここで解説しています。

­ ­TinyMCEの基本スペックとインデント方法の変更

7-2.見出し、本文、URL設定と使い方

ここではドキュメントを作成する場合の基本項目の設定と使い方を解説しています。

特にURLリンクについてはビジュアルエディタでドキュメント内のリンクの張り方も解説しています。

­ ­見出し、本文、URL設定と使い方

7-3.OL,UL要素に変わる新しいLIST要素の追加

TinyMCEではリストとして、オーダリスト<ol>とアンオーダーリスト<ul>が用意されていますが、決して使い易いものではありません。

そこでこのサイトでは半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

­ ­OL,UL要素に変わる新しいLIST要素の追加

7-4.整形済みテキストと引用の設定と使い方

ここでは整形済みテキストと引用の設定と使い方を解説しています。
整形済みテキストのポイントは入力ミスを起こさせない為の設定で、
引用の場合はデフォルトの引用よりもっとビジュアルな引用BOXを作成しています。

­ ­整形済みテキストと引用の設定と使い方

7-5.イメージの設定とレスポンシブ対応

TinyMCEで画像を取り扱うポイントは、
画像に枠を付ける場合にどうするのか?と
画像のレスポンシブ化をどう実現するか?(スマホ対応の時に重要です)になります。

ここではこれらの設定方法と使い方を解説しています。

­ ­イメージの設定とレスポンシブ対応

7-6.TinyMCEで綺麗な表を作る

PCで表を作成し、それをタブレットやスマホで表示すると表が綺麗に収まりません。

また基本機能だけでは表の枠線や色を綺麗に表示できません。

そこでこれらを解決する為にBootstrap機能を使った表作成方法を解説しています。

­ ­TinyMCEで綺麗な表を作る

7-7.TinyMCEで段落変更(Enter)が使えるメモBOXを作る

TinyMCEのスタイルは1つの段落に対する定義になります。

よってスタイルで作成したBOXは改行(Shift+Enter)しか使えません。

そこでここでは段落変更(Enter)が使えるBOXの作成方法を解説しています。

­ ­TinyMCEで段落変更(Enter)が使えるメモBOXを作る

7-8.TinyMCEで色々なタイプのBOXを作る

上記で説明したメモBOXは通常のCSSを使って作成したBOXです。

ここではFlexboxの機能を利用して、横に1個または2個並ぶBOX、枠線を後で付ける、リンクを後で付ける等ができるBOX作成方法を解説しています。

­ ­TinyMCEで色々なタイプのBOXを作る

7-9.TinyMCEにタブ機能を実装する。

ここではビジュアルエディタでタブを使ったコンテンツを作成する方法を解説しています。

これができるとサイト訪問者は、このタブを切替えるだけで必要な情報を簡潔に読むことが可能となります。

­ ­TinyMCEにタブ機能を実装する。

7-10.TinyMCEにBootstrapのコラップス機能を実装する。

コラップスとはアコーディオンのようにコンテンツを開閉できる機能で、ここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。

­ ­TinyMCEにBootstrapのコラップス機能を実装する。

7-11.TinyMCEにBootstrapのモーダルウィンドウを実装する。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。

ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで利用する方法を解説しています。

­ ­TinyMCEにBootstrapのモーダルウィンドウを実装する。

7-12.TinyMCEに自作のモーダルウィンドウを実装する。

前の投稿ではBootstrapのモーダルウィンドウの機能をビジュアルエディタで利用する方法を解説しましたが、この方法ではどうしてもBootstrapの仕様に制限を受けます。

そこでここでは自作のモーダルウィンドウの作り方を解説しています。

この方法のメリットは、表示方法等を簡単にカスタマイズできる事です。

­ ­TinyMCEに自作のモーダルウィンドウを実装する

8.メール送信

8-1.独自のメール送信プログラムを作成する

旧サイトではメール送信に『Contact Form 7』を利用していましたが、色々な事が判ってくるとこのプラグインを利用するよりは独自プログラムで作成した方が色々な機能をつける事ができます。

ここではその方法を解説します。

­ ­独自のメール送信プログラムを作成する