WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

テーマ「ShapeShifter」の設定方法

テーマ「ShapeShifter」内で行える設定ページでの操作を解説していますが、こちらはプラグイン「WP Theme ShapeShifter Extensions」の有効化が必要になります。ワードプレスのリポジトリから無料配信されていますので、管理画面の「プラグイン」->「新規追加」で検索して頂き、インストール・有効化をお願い致します。

簡単な設定であらゆるアレンジを加えることができますので、「初期設定」からあらゆるカスタマイズが行えるよう、テーマ「ShapeShifter」の使い方に少し目を通していただけると、使い勝手が大きく向上します。

また、テーマにもプラグイン「WP Theme ShapeShifter Extensions」にも自動の更新通知機能が備わっていませんので、当サイトより配布されている専用更新プラグインをインストール・有効化をお願い致します。

 

ファイルを編集

「外観」->「ファイルを編集」ページでは、ウェブサイトのルートディレクトリに置かれている「.htaccess」の編集が行えます。「ルート/.htaccess」です。

カスタムフォントの設定

「外観」->「カスタムフォント」ページで行う、CSSのフォントファミリーとして出力される他、テーマカスタマイザーでのフォント設定の選択肢に追加されるオプション設定です。

追加方法としては、GoogleのAPIでGoogle Fontsを利用する方法と、フォントファイルをアップロードする方法を用意しています。

Google Fonts

僕が見た限りでは日本語のフォントが見当たらないので、日本語サイトには殆ど意味が無いんじゃないかと思っているのですが、追加してみたAPIを利用したGoogle Fontsの設定方法です。

まず、GoogleでAPIキー(ブラウザキー)を取得します。

Google Fonts 設定 1
Google Fonts 設定 1

次に「外観」->「カスタムフォント」ページへ移動します。

「Google Fonts APIキー」の横にテキストフィールドがありますので、ここにAPIキーを入力して「保存」をクリックしてください。

クリックしても画面は遷移しませんので、そのまま暫く待っていると、空白だった下のボックスにGoogle Fontsのリストが表示されます。

 

 

Google Fonts 設定 2
Google Fonts 設定 2

(使用したキーは消してしまいましたが)右のスクリーンショットのようにフォントのリストが表示されますので、あとは使いたいフォントにチェックを入れて、「これらのフォントを使用」というボタンをクリックします。

こちらも画面遷移をしないのですが、5秒程(サーバー環境にもよるかもしれませんが)で保存されると思います。

 

フォントファイルのアップロード

「外観」->「カスタムフォント」ページでは、フォントファイル(「.otf」「.ttf」「.woff」)をアップロードしたり、削除することができます。

このページでアップロードしたフォントファイルは、ファイルと同名の「font-family」を設定する「font-face」が自動で設定されます。

また、アップロードしたファイルから生成された「font-family」はテーマカスタマイザーのフォントファミリーの選択肢に自動で追加されます。

 

カスタムCSS

「外観」->「カスタムCSS」ページでは、CSSファイルをアップロードし、公開側のページで出力するCSSに追加して出力することができます。自分でCSSを書くことができる人などが、子テーマを作成することなく、オリジナルのCSSファイルをアップロードするだけで簡単にデザインを加えられるようにしています。

ファイルをアップロードして、使いたいファイルにチェックを入れて適用させるだけです。

 

テーマの設定

タブで切り替え、テーマのあらゆる設定を行えます。

基本的にはチェックボックスやテキストボックスなど、簡単な設定項目をまとめています。

 

一般設定

ワードプレスの標準設定に関する設定項目です。

標準タブ設定
「テーマの設定」を開いた時のタブを選択します。
標準設定の解除(チェックボックス)
ワードプレス標準での設定を解除できます。「remove_action」を使用しています。

自動挿入設定

設定しておくことで所定の位置に出力できる設定をまとめています。

コンテンツ初期値
「投稿ページ」や「固定ページ」を新規追加する際に自動的にコンテンツの初期値として挿入されますので、毎回使用するフォーマットが決まっている場合などは作業が楽になります。
※ HTMLタグで挿入してください。
headタグ内に出力
headタグ内の「wp_head」フックの直後に挿入されます。
ヘッダーに出力
<body>の直後に挿入されます。
フッターに出力
</body>の直前に挿入されます。

速度調節設定

ページ速度に関する項目です。

「style.min.css」を使用(チェックボックス)
1行にした「style.css」ファイルを使用します。
エンキューされるJavaScriptを非同期にする(チェックボックス)
「wp_enqueue_script」で出力するscriptタグを非同期にして出力します。
非同期にしないJavaScriptのハンドル名(カンマで区切る)
非同期対象から外します。「jquery」はjQueryのハンドルです。
画像ファイル読み込みの遅延化(チェックボックス)
スクロールしてウィンドウに入った時に画像が読み込まれるようになります。
アーカイブページの「AJAXロード」(チェックボックス)
アーカイブページで投稿記事一覧の一番下に非同期読み込みするボタンを設置できます。

 

ウィジェットエリアの設定

標準で備わっているウィジェットエリア「右上固定可能エリア」「左サイドバー」「左サイドバー固定部分」「右サイドバー」「右サイドバー固定部分」の5つの他、テーマ「ShapeShifter」には「モバイル用のサイドメニュー」「ヘッダー後」「コンテンツ前」「コンテンツ開始」「最初のh2タグの直前」「コンテンツ終了」「コンテンツ後」「フッター前」などあらゆる箇所にウィジェットエリアが出力できるようになっており、ここでは追加するウィジェットエリアの設定が可能です。

ウィジェットエリアの数
追加するウィジェットエリアの数です。
ウィジェットの表示位置
出力先を選択肢から選びます。「出力先を自分で指定」は「モバイル用のサイドメニューに適応」にチェックを入れる場合、もしくは自分でテンプレートファイルを編集できる場合のみにしてください。
ウィジェットの横幅
出力先のウィジェットエリアの横幅を設定できます。横幅をラッパーの横幅以内に収まると、同じ表示位置でウィジェットエリアを横に並べることができます。例えば、サイトのコンテンツエリアが3カラムの場合は横幅が1280pxになりますので、「フッター前」に「300px・300px・600px」と配置すれば、3つ並べることができます。
モバイル用のサイドメニューに適応(チェックボックス)
チェックを入れると、モバイル端末での表示時に、右側のスライドサイドメニューに出力されるようになります。
ID
ウィジェットエリアのラッパーの「id」属性値として使用されます。カスタムCSSやJSなどを用意している場合、セレクタになるように用意しています。不要であればデフォルトのままで問題ありません。
Class
IDと同様です。
名前
「外観」->「ウィジェット」で表示されるウィジェットエリアの名前です。ウィジェットエリアの出力にも使用されます。日本語でも問題ありません。
詳細
「外観」->「ウィジェット」で表示されるウィジェットエリアの詳細です。

横幅をラッパーのサイズ内に収めれば、(例えば、フッターのウィジェットエリアを3カラムにするなど)複数のウィジェットエリアを横に並べて出力することも可能です。

SEOの標準設定

「初期設定」ページでも可能な設定項目で、ヘッダー内に出力する情報を指定できます。

「JSON-LD」によるマークアップの自動出力(チェックボックス)
構造化データを「JSON-LD」の形でヘッダーに出力されます。
構造化データ用のロゴイメージの選択
上の設定で投稿ページのデータを出力する際、ウェブサイトのデータのロゴイメージとして出力するイメージファイルを選択します。
「前のページ」や「次のページ」のlinkタグを自動出力(チェックボックス)
コンテンツページを複数ページに分割している場合、前後のページ関係を示すリンクタグを出力します。
カノニカルリンクの自動出力(チェックボックス)
検索エンジンが同じページを別のページと認識しないための設定です。カノニカルリンクにはパーマリンクが使用されます。
SEOロボットメタの自動出力(チェックボックス)
「ホーム」「フロントページ」「投稿ページや固定ページなどのコンテンツページ」「カテゴリーページ」の1ページ目以外では、「noindex,follow」を持ったmetaタグを出力するようになります。
SEO詳細メタの自動出力(チェックボックス)
コンテンツページの抜粋をdescriptionのmetaタグの値として使用して出力します。
SEOキーワードメタの自動出力(チェックボックス)
コンテンツページのカテゴリー・タグをkeywordsのmetaタグの値として使用し出力します。
「Twitter Card」タグを自動出力(チェックボックス)
「Twitter Card(ツイッタカード)」を出力します。訪問者がツイートアイコンなどをクリックした際に、ツイートのテンプレートにページの情報(タイトル・サムネイルなど)を参照させることができます。
Twitterアカウント
ツイッターのアカウントがあれば、「@マーク以降」をご入力ください。
「Open Graph」タグを自動出力(チェックボックス)
「Twitter Card(ツイッターカード)」と同様に「Open Graph(オープングラフ)」も出力します。代表的なSNSはFacebookですが、その他「OpenGraph」を採用しているSNSなどの投稿にも反映されます。
「Twitter Card」や「Open Graph」に使用するデフォルトイメージの設定
基本的にはコンテンツページのサムネイルが参照されますが、設定されていない場合はこちらで設定したイメージファイルが出力されます。
Google+のリンクタグ用URL
「Google+」のアカウントがある場合は、こちらにURLをご入力ください。linkタグで出力します。

 

 

その他の設定

項目が増えて混沌と化せば、今後ページやタブを追加するかもしれない機能をまとめています。

コンテンツページビューのカウントをリセット(チェックボックス)
チェックを入れて「変更を保存」を押すと、各ページのページビューカウントがリセットされます。
自動でコンテンツページビューのカウントをリセット
定期的に自動でコンテンツページビューのカウントをリセットしたい場合に設定してください。

 

デバッグモードの設定

設定項目は以下の通りです。

デバッグモードを使用(チェックボックス)
チェックを入れて、「KEY」と「VAL」を設定すると、デバッグモードを「ON」にできます。
デバッグモードKEY
デバッグモードで使用するKEYを設定します。
デバッグモードVAL
デバッグモードで使用するVALを設定します。

ちょっとした不具合の原因を探したいけど、公開ページでデバッグモードするのはちょっと危険です。

そこでデバッグモードを任意の条件下の場合のみにONにする方法を取っており、その条件は以下の通りです。

  1. 設定項目のチェックを入れている。
  2. 「KEY」と「VAL」が両方設定されている。
  3. URLのクエリ(GET)に「?KEY=VAL」が存在する場合のみ、もしくは管理画面でのみ
  4. 「update_plugins」の権限を持っているユーザーがログイン時

1〜4の条件を満たしている場合のみ、デバッグモードが「ON」になります。

注意点としては、このデバッグ機能は「after_setup_theme」にフックされる関数によって「WP_DEBUG」を定義するものですので、「wp-config.php」で既に定義している開発環境においては不要です。あくまで標準的な設定が面倒な人向け、もしくはログインしていない状態(管理バー無しの状態)でもチェックできるようにするための方法の1つだということを覚えておいてください。また、本来テーマのコードをチェックするために設置した機能(子テーマ利用に便利かなと)で、他のプラグインのコードが最初に読まれるタイミングでもデバッグモードが機能する保証はありません

 

メニュ
ホーム
トップへ