テーマの基本的な使い方

テーマの基本的な使い方

「ウィジェットエリアにウィジェットを入れ、メニューの設定をして、カスタマイザーでデザインを設定する」というのが基本的な流れになります。

ウィジェットの設定方法

管理画面の「外観」⇒「ウィジェット」から設定できます。

各ウィジェットの設定方法

おすすめ記事

おすすめ記事は、記事の投稿IDを指定して表示します。

投稿IDを調べるには、「投稿一覧」を開き、記事のタイトルにカーソルを合わせると左下にURLが表示されるので、その中の「post=xxxx」の数字が投稿IDだと分かります。

記事投稿者

記事投稿者に表示される内容は、管理画面の「ユーザー」⇒「あなたのプロフィール」から設定します。

プロフィール写真はGravatarを使って設定する必要があります。

設定方法については以下の記事が参考になるでしょう。

Gravatarを利用した独自アバターの設定

「カテゴリー」と「カテゴリー(カスタム)」の違い

(カスタム)が付いていないウィジェットはWordPressにデフォルトで用意されているウィジェットです。

ただ、デフォルトのウィジェットだと投稿数を表示したときに表示がおかしくなってしまうので、オリジナルのウィジェットを用意しました。

カスタマイザーでの設定が確実に反映されるように、基本的には「カテゴリー(カスタム)」を、ドロップダウン表示する場合のみ「カテゴリー」を使用してください。

※「アーカイブ」と「アーカイブ(カスタム)」についても同様です。

AdSense広告の貼り方

AdSense広告を貼るには、「カスタムHTML」ウィジェットを配置し、中にコードを貼り付けてください。

メニューの設定方法

管理画面の「外観」⇒「メニュー」へと進みます。

まずは新規メニューを作成しましょう。

メニュー名を入力し、「メニューを作成」をクリック。

「メニュー項目を追加」が出てくるので、追加したいページにチェックを入れて「メニューに追加」をクリック。

メニューを追加した後は、「メニュー設定」から「メニューの位置」を選んでメニューを保存します。

モバイル用ヘッダーメニュー

PC用のヘッダーメニューは端末の幅が1200px未満の時に非表示になり、代わりにモバイル用のヘッダーメニューを利用できます。

モバイル用のヘッダーメニューは、「メニューの位置」を「ヘッダー(レスポンシブ)」にすることで設定できます。

カスタマイザーの開き方

管理画面の「外観」⇒「カスタマイズ」から開くことができます。

カスタマイザーでの設定

タイトル・メタディスクリプション設定

トップページが検索結果にどう表示されるかを決める重要な項目です。

「キャッチフレーズ」は必須ではありませんが、「サイトのタイトル」と「サイトの説明」は大事な項目なので、必ず設定しておきましょう。

記事ページのメタディスクリプション

何もしなければ本文の内容を前から順番に抜粋して表示するようになっていますが、記事投稿画面で「抜粋」を入力すれば、その内容が優先されます。

「抜粋」欄が表示されていないときは、右上の「表示オプション」から「抜粋」にチェックを入れると表示されるようになります。

カテゴリー・タグページのメタディスクリプション

カテゴリー別の記事一覧ページやタグ別の記事一覧ページのメタディスクリプションは、「投稿」⇒「カテゴリー/タグ」から編集できる各カテゴリー・タグの「概要」欄に入力したものが反映されます。

OGP設定

OGPの設定をしておくと、サイトがSNSでシェアされたときによりリッチに表示されるようになります。

「Twitterカードの種類」の設定は必須で、それ以外は任意です。

↓「Twitterカードの種類」は「summary」だと左の画像、「summary_large_image」だと右の画像のように表示されます。

noindex設定

noindexを指定したページはGoogleの検索結果に表示されないようになります。

どのページをnoindexにするかは場合によりますが、404ページ検索結果ページはnoindexに指定しておくとよいでしょう。

記事ページ・固定ページのnoindex・nofollow設定

noindex・nofollowは記事ごとに設定することができます。

noindexを指定するには、記事編集画面で、名前が「noindex」値が「1」のカスタムフィールドを追加します。

nofollowの場合も、noindexと同じようにカスタムフィールドを追加します。

ブロックエディタでカスタムフィールドが表示されていない場合

右上のメニューから「オプション」をクリックし、

「カスタムフィールド」にチェックを入れると、表示されるようになります。

記事ページ・固定ページでサイドバーを非表示にする

サイドバーの表示・非表示は記事ごとに設定することもできます。

サイドバーを非表示にするには、記事編集画面で、名前が「column」値が「1」のカスタムフィールドを追加します。

見出し

見出しはh2、h3、h4のみデザインを設定できるようになっています。

デザインは予め何パターンか用意されているものではなく、完全に1からスタイルを作っていきます

例えば、文字のサイズ、文字色・背景色、上下左右それぞれの枠線のスタイル(太さ・色・破線/点線など)、角丸にするか、影の有無、などを値を入力するだけで設定できます。

ボタン

ボタンのデザインは3パターンまで設定でき、それぞれショートコードで挿入できます。

押すとへこむボタンも簡単に作ることができます!

ボックス

ボックスのデザインは5パターンまで設定でき、それぞれショートコードで挿入できます。

ボックスの見本
これはボックスの見本です。

リスト

ショートコード[list1][/list1]などで挿入できるリストの前に表示されるアイコンの色や種類を設定します。

リスト4・5でFont Awesomeアイコンの種類を指定するには、「Unicode」と「Icon Style」を調べる必要があります。UnicodeとIcon Styleはアイコン詳細ページで確認できます。

リンク

ショートコード[link1][/link1]などで挿入できるリンクの色を設定します。

蛍光マーカー

エディタで挿入できるマーカーの色を最大で4パターン設定できます。

ショートコード[table2][/table2]などで挿入できる表の色を設定します。

ブロックエディタ(Gutenberg)の対応状況

現在、テーマ独自の機能のうち、「ボタン」「ボックス」「リスト」「リンク」「マーカー」がブロックエディタに対応しています。

「ボタン」「ボックス」「リスト」「リンク」は「カスタムブロック」から選択できます。

ボックス番号・ボタン番号などは、「外観」⇒「カスタマイズ」⇒「ボックス」などで設定できるものと対応しています。

マーカーを引くには、テキストを選択した状態で、「よりリッチなテキスト制御」から引きたいマーカーを選択します。

マーカーの番号は「外観」⇒「カスタマイズ」⇒「蛍光マーカー」での設定と対応しています。