定数の変更による画像指定、ID設定、その他POCOの設定

ダイブツ

この記事は約 10 分で読めます

ワードプレステーマPOCOの独自設定について解説します。設定変更は管理画面ではなくソースコード内の定数設定で行います。子テーマはありません。各定数がどこでどのように使われるのかも説明します。

このページは POCO でブログ運営を始まる前にやるべき設定の続きです。前回はワードプレスの標準機能で設定できる項目を解説しました。今回は POCO 専用の設定について解説します。

POCO 専用の設定はすべてソースコードを直接修正します。本来であれば用意すべき子テーマもありません。そのためエディター画面の行き方から解説します。

この設定をする前にバックアップを必ずお取りください。

定数設定画面への移動

まずは管理画面より「外観」→「テーマエディター」をクリックします。

ワードプレスプレスでは、ソースコードの変更は子テーマでやることを推奨しています。そのため上図のような警告が表示されます(初回のみ)。

バックアップを取得されたことを承知の上「理解しました」をクリックします。

ソースコードの編集画面が表示されます。デフォルトは style.css の編集画面です。

画面右にある「テーマファイル」一覧から「テーマのための関数 (functions.php) 」をクリックします。

「テーマのための関数」画面に移ると、編集欄の上部に「定数」というコメントのあるコードが表示されます。この定数一覧を編集します。

各定数の解説

各定数がどのように使われているのか、順番に解説します。

URL_SITE_LOGO_IMAGE

この定数はサイトロゴ画像のファイル名を URL で指定します。 https:// からのフルパス(絶対パス)で指定します。

デフォルトでは POCO のロゴ画像が指定されています。変更するには、自分で製作したロゴ画像をワードプレスの「メディア」にアップロードしてください。そしてアップロード先の URL をコピーして定数の値に置き換えてください。

ロゴ画像を使わない場合は header.php を編集してロゴ画像の img タグを削除してください。しかし、この定数は以下の項目でも使われているので、ロゴ画像は独自に用意されることをお勧めします。

  • スマートニュース配信用のフィードにて使用。サイト情報の一部としてロゴ画像情報を提供している→ smartnews.php を参照(グノシー向けフィードではロゴ画像ファイル名を別の定数で指定する、別途解説あり)
  • 構造化マークアップ (JSON-LD) で使用。スマートニュースと同じく、サイト情報の一部としてロゴ画像の情報を提供→ the_json_ld_webpage (functions.php) を参照

ちなみに、 POCO ではサイトロゴ画像の高さを 60 px にしています。理由は Google が AMP ページのガイドラインとして推奨しているからです。幅は 600 px 以内であれば問題ありません。

外部リンク:記事 | 検索 | Google Developers

URL_PORTRAIT_IMAGE

この定数も URL のフルパスで画像ファイル名を指定します。上の図にあるように、ブログ運営者情報の顔写真(アイコン、肖像画)を表示するために使っています。

デフォルトは POCO 制作者(ダイブツ)のアイコンで、親サイトのロゴ画像として使用しているものです。この定数を編集してお好きな画像に変更してください。

画像サイズは幅・高さともに100pxの正方形で、CSSで指定してあります。このサイズは新着記事や関連記事のサムネイルサイズと CSS は別コードですが、大きさは統一しています。画像サイズは変更するには about-author-blogcard img (style.css) を編集します。またワードプレスのサムネイル画像変更も必要です。

画像の下にある「詳しい自己紹介ページへのリンク」は次に解説します。

URL_AUTOBIOGRAPHY_PAGE

この定数はブログ運営者(記事執筆者)のプロフィールページへのリンクを指定します。これまでの定数と同様 http 以降の URL を指定します。

この定数の第1の使い方は、投稿ページで表示される執筆者名のリンクです(上図参照)。固定ページではこのリンクは表示されません。

上記の使い方のほか、すでに紹介したブログ運営者情報の「プロフィール」リンクでもこの定数を使っています。自分のプロフィールページを作ってリンクを置き換えることを推奨します。

デフォルトでは投稿者による記事の一覧ページの URL のダミーとしています。

“https://yoursite.com/author/yourwpid”

yoursite.com はドメイン名、 yourwpid はワードプレスのログインに使用しているアカウント名です。当サイトで私(ダイブツ)の記事一覧ページにする URL はこのようになります。クリックして表示を確認してみましょう。

https://wp-poco.com/author/daichan0204

URL_PAGE_NOT_FOUND_IMAGE

この定数は404ページが表示された場合に使う画像のファイルを URL で指定します。

デフォルトでは赤い点線に示す画像が指定されています。

不親切な404ページは SEO 的にも問題とされています(ユーザーフレンドリーではない)。404ページが表示されたユーザーのために、他のページに誘導したりサイト内検索を促すようにガイドしましょう。

そのためにも404画像は冷たいイメージではなく、安心感を与えるものが望ましいです。 POCO のデフォルトの画像ではなくご自身で用意することをお勧めします。

URL_BLOGCARD_NO_IMAGE

この定数は、新着記事や関連記事のアイキャッチ画像が設定されていない場合の代替え画像ファイルを URL で指定します。

デフォルトでは上図に示す画像が指定されています。この画像はクセが強すぎるので、自分のブログ専用の画像を作って指定するのが良いでしょう。

万が一、 POCO の No Image 画像で良ければ、 URL の wp-poco.com をあなたのドメインに差し替えてください。この画像は POCO のパッケージに標準で含まれているので、ドメインだけ修正すればあなたのサイト内の同じ画像にアクセスします。

画像サイズは高さ・幅ともに 100px の正方形、いわゆるサムネイルサイズです。サイズ変更をしたい場合は CSS の編集とワードプレス側の設定変更も必要です。

URL_ALT_THUMBNAIL_IMAGE

先ほどの No Image は「ブログ内」の代替えアイキャッチ画像として使用しました。この定数は「ブログの外」で使うアイキャッチ(サムネイル)の代替画像ファイル名です。両者は似て非なるものです。

具体的には以下の部分で使われます。

  • JSON-LD 形式の構造化マークアップ
  • OGP や Twitter Card のシェアデータ(上図の例)
  • カスタムフィード(スマートニュース、グノシー)

上記のいずれの部分も以下の条件で使用します。

  • ホームページをシェアする場合のサムネイル画像
  • 投稿ページまたは固定ページでアイキャッチ画像を指定していない場合

他の画像と同じくこの定数は URL でファイル名を指定します。

デフォルトは上図にある POCO のテーマ画像です。ご自身のブログのイメージが出せる画像を作成してファイルパスを修正してください。

横幅は 1200px 以上を推奨します。これも AMP でリッチリザルトに採用されるための条件だと Google が公表しているためです。

外部リンク:記事 | 検索 | Google Developers

URL_LOGO_FOR_GUNOSY, URL_ICON_FOR_GUNOSY

この2つの定数はどちらもグノシーに記事を配信するためのサイト情報を提供します。

URL_LOGO_FOR_GUNOSY は横長のサイトロゴ画像を URL で指定します。既に紹介したサイトロゴ画像の定数と別にしているのには理由があります。

グノシー向けのサイトロゴ画像は高さが 44 px 固定です。 AMP 指定のロゴ画像の高さである 60 px より小さいです。そのため個別に適切なロゴ画像を配信するには、定数を別に分けるべきと判断しました。

URL_ICON_FOR_GUNOSY は正方形のアイコン画像です。ワードプレスの一般設定で選択したサイトロゴの URL をこの定数に指定すれば良いでしょう。

アイコンのファイル指定はワードプレスの API で自動化したかったのですが、標準のサイトロゴ呼び出し関数がありませんでした。お手数ですが手動で修正願います。

外部リンク:GunosyFeed Ver. 3 仕様書/手順書

TWITTER_ID

この定数は、フォローボタンにあなたのツイッターアカウントをリンクするために使用します。 Twitter アカウントは必ずお作りください。

アカウント名はアットマーク “@” なしで入力してください。例えばアカウント名が @habatakurikei であれば、定数に入力する値は habatakurikei です。

フォローボタンのほか、 Twitter Card で記事をシェアする際のサイト情報にこの定数を使用します。

ANALYTICS_ID

この定数は Google Analytics のアカウント情報を指定します。アナリティクスが生成した “UA-XXXXX-Y” の数字と記号をご自身のIDに置き換えてください。

この定数はブログ表示に出てこない裏設定のため、コードの画面で説明させていただきます。 header.php 内で上の図にある関数 google_analytics (functions.php) を呼び出します。

POCO では「アナリティクス」ではなく「タグマネージャー」でもアクセス解析できる用意もあります。タグマネージャーのアカウントを使用する場合は header.php を編集してください。別記事で解説します。

RECENT_POST_QTY

RECENT_POST_QTY はサイドバーにある新着記事の表示件数を変更します。デフォルトは5件です。

RELATED_POST_QTY, EXCERPT_CHAR_LENGTH

RELATED_POST_QTY は投稿ページ下にある関連記事の表示件数を変更します。固定ページでは関連記事は表示されません。デフォルトは5件です。

最近の投稿とスペルが似ているので注意してください。それぞれの意味はこのようになっています。

  • RECENT: 最近
  • RELATED: 関連した

記事一覧(ホーム、カテゴリ)ページや RSS フィードで配信する記事数の設定はこの定数ではありません。ワードプレスの「表示設定」にある「1ページに表示する最大投稿数」と「RSS/Atom フィードで表示する最新の投稿数」をお使いください。

EXCERPT_CHAR_LENGTH は記事の概要を抜粋する文字数です。デフォルトは120に設定されています。

抜粋文は以下の場所で使われています。重要な定数です。

  • 関連記事一覧や一覧ページ(ホーム、カテゴリページ)の記事要約文
  • メタディスクリプション、 JSON-LD, OGP, Twitter Card でのシェアに使う抜粋文
  • 各種フィードの要約文情報で使用(スマートニュースを除く)

投稿ページや固定ページに「抜粋」を入力してあれば、そこからこの定数で指定した文字数を抽出します。「抜粋」欄が空であればコンテンツの冒頭文から指定文字数分を抽出します。

スペースの扱いなど、どうしても正確な文字数にこだわるのであればプラグイン WP Multibyte Patch を導入してください。ただし POCO にてこのプラグインの動作確認はしていません。あらかじめご了承願います。

READING_CHAR_PER_MIN

この定数は投稿ページで「記事が読み終わるまでの時間」を計算するために必要です。固定ページでは使われません。

ヒトが一分間に読める文字数には諸説がありますが、大体400~600文字/分といわれています。

スマートフォンによる記事の流し読みが主流になっていることを考えて、 POCO のデフォルト設定値は多めの600としています。 1以上の正の整数を指定できます。

まとめ

このページで解説したどの設定も、本来であれば管理画面から設定変更すべきものです。そのため定数による設定は本来のやり方ではないことは重々承知です。

しかし一方で、ほとんどの設定は一度やれば何度も変更しないものです。そのためにわざわざ設定画面を用意するのは面倒でした。

次はカスタムフォント(ウェブフォント)の準備をしましょう。フォントの設定は CSS を直接編集します。このページの内容を理解すれば難しくありません。

この記事のカテゴリ:POCOでブログ運営
この記事のタグ: なし

シェアする

POCOを作った人

ダイブツ

WordPressでブログをはじめてみたものの、既存のテーマでは満足できなくてPOCOを制作しました。親サイトのコンセプト「自分の知識やノウハウをすべて公開する」にならって、POCOを通じて得たWordPressの知識はこのサイトで紹介します。

親サイトにある私の紹介:プロフィール

フォローする