【WordPress プラグイン】AMP for WP 投稿画面

amp for wp logo

WordPress プラグイン、AMP for WP の全体の設定方法について前回まとめました。
全体の設定をデフォルトとなりますが、各投稿画面で、そのページ用に設定することもできます。
投稿画面の下の方に表示されます。

AMP ページ公開・非公開選択ボタン


投稿画面の左側、設定の部分の一番下の方に、そのページの AMP 版を公開するかどうか、選択できます。


その下に表示される「Preview AMP」をクリックすると、AMP のプレビュー画面が出ます。

カスタムフィールド

このカスタムフィールドに表示される名前が何を意味するのか分からなくて検索したのですが、これに触れてる方が見つかりませんでした・・・。何だろう?って探って、こういうことかーと私が思ったことをまとめるので、内容間違っているかもです。

AMP for WP では、各投稿ごとにそのページ専用の AMP を生成することができます。カスタムフィールドの下の部分に、「AMP Page Builder」(設定で ON にしている場合。「Setting」⇒「Page Builder」で。)と「Custom AMP Editor」の欄が表示されますが、それらは、すべてカスタムフィールド扱いのようです。つまり、その欄に書き込んだことが、自動的に、このカスタムフィールドに書き込まれる、という方式のようですね。なので、特に触らなくていいのですが、一応、どんな風に書き込まれるのかまとめます。

amp-page-builder
下の「AMP Page Builder」で、ドロップ&ペーストすると、ここの値が自動的に書き込まれます。

ampforwp_custom_content_editor
下の「Custom AMP Editor」の欄に記述すると、ここの値が自動的に書き込まれます。

ampforwp_custom_content_editor_checkbox
下の「Custom AMP Editor」で、「Use This Content as AMP Content」をチェックすると、ここの値が「yes」になります。
チェックしないと、空欄です。

ampforwp_page_builder_enable
下の「AMP Page Builder」で、赤いボタン「Start the AMP Page Builder」をクリックすると、ここの値が「yes」になります。クリックしないと空欄です。

ampforwp-amp-on-off
右の設定の一番下の方の、「Show AMP for Current Page?」で、「Show」を選択するとここの値が「default」になります。「Hide」を選択すると「hide-amp」となります。

use_ampforwp_page_builder
下の「AMP Page Builder」で、「Use Builder」をチェックすると、ここの値が「yes」になります。チェックを入れないと空欄です。

AMP Page Builder

ドラッグ&ペーストで簡単にそのページだけのオリジナルの AMP ページが作れます。
「Start the AMP Page Builder」をクリックします。
(設定で ON にしていないと利用できません。「Setting」⇒「Page Builder」⇒「AMPforWP PageBuilder」)

左上の「Use Builder」にチェックを入れます。

最初に、「Column(列)」を1列か2列を選んで、エリアにドラッグします。
次に、その「Column」の中に、表示させたい位置に「Moduls(モジュール)」をドラッグしていきます。

エリアにドラッグした「Moduls」は、歯車マークをクリックすると、内容を記述できます。「Design」「Advance」でスタイルも設定できます。

Custom AMP Editor

「AMP Page Builder」同様、ここでもこの投稿ページオリジナルの AMP ページが生成できます。
こちらは、ドラッグ、ではなく、自分で書き込まなくちゃいけませんが。HTML タグを使っても、自動で AMP に変換してくれます!便利ですねー。
まずは、「Use this content as AMP content」にチェックを入れます。

あとは、オリジナルの文章を、テキストモードかビジュアルモードで書き込むだけです。クラシックエディターですね。

注意点!
「AMP Page Builder」、「Custom AMP Editor」、どちらにも「Use」にチェックを入れた場合、「Custom AMP Editor」が優先されるようです。

【WordPress プラグイン】AMP for WP 設定

amp for wp logo

WordPress のプラグイン、「AMP for WP」を使って、このサイトの AMP ページを作ってみました。
(WordPress のオフィシャルの「AMP」というプラグインではなく、赤いロゴの「AMP for WP」です。こちらの方が細かな設定ができますよ!)
プラグインの説明と、モバイルからのアクセスがどれぐらい高速化したのか検証してみたいと思います。

AMP とは?

AMP (Accelerated Mobile Pages) とは、Google と Twitter が中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化する手法のことです。レスポンシブ対応のモバイルフレンドリーとは別の手法で、通常の HTML や JavaScript とは異なる、「AMP HTML」「AMP JP」で書かれたページで、コンテンツのキャッシュ配信を行う「Google AMP Cache」が利用されます。詳しい技術は、あちこちのサイトに書かれているので割愛しますが、通常の HTML ページ(モバイル対応も含む)と AMP ページとの関係は、↓ の図のような具合です。

通常の HTML のページ(http://hazu.jp/〇〇〇/)とは別に、AMP の専用ページ(http://hazu.jp/〇〇〇/amp/)を用意します。head の中でお互いを関連付け、それを Google などの検索エンジンが、クライアントのディバイスを判断して、モバイルなら AMP ページを表示します。

AMP ページは、サイト全体に設定もできますが、記事投稿ページだけに設定するなど、一部のページのみに設置することもできます。

どれぐらい速くなるのか?

Google の PageSpeed Insights で、普通の HTML(レスポンシブ対応)と AMP ページを、モバイルで表示した場合を速度を、検証してみました。

HTML

AMP

20 ポイント早くなってますね!
設置したばかりなので、PV の変化などは検証出来てません。内容がらか、このサイトの場合 PC からのアクセスが圧倒的に多いので、AMP のおかげで PV が劇的に増えるとは思いませんが、一般的にはモバイルからのアクセスの方が多いと思うので、効果を期待できますね。

Google Search Console の速度レポートのヘルプには、こう書かれています。

速度が重要な理由

  • ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
    • ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
    • ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。
  • 遅いと判断されたページは、Google 検索での順位が下がる可能性がある。

AMP for WP の設定

このプラグイン、英語版しかないんですよね。訳しつつ、設定詳細をまとめます。新規のプラグイン追加で「AMP for WP」をダウンロード、有効化すると、「Basic Setup」と「Advance Setup」から選ぶためのウィンドウが出ます。細かな設定のできる「Advance Setup」を選びます。(この設定は後から変更もできます。)

Setup (基本セットアップ)

Website Type

ウェブサイトのタイプ設定。
「ブログ」「ニュース」「ローカルビジネス」「E コマース」「その他」の中から選びます。

Where do you need AMP?

AMP ページを作成するページの種類。
「ホームページ」「投稿」「固定ページ」「アーカイブ」の中から選びます。
このサイトは、「投稿」のみ AMP ページを作りました。AMP だと高速になりますが、レイアウトなどの見栄えも変わるので、どの部分を AMP 化するかよく検討しましょう。

Design and Presentation

ロゴと、グローバルカラーを選びます。
ロゴサイズは、190 × 36 です。(190 × 120 推奨と書かれていますが、間違ってますね・・・)
グローバルカラーが使用される場所がいくつかあるようで、私も全部は分かっていませんが、Design の項目のところで選んだテーマによっては、ロゴの背景の色がここで選んたグローバルカラーとなります。それから、Cookie の同意確認の部分でも、この色のボタンが現れました。

Analytics Tracking

Google Analytics を利用している場合、ここでトラッキング ID を書き込みます。それ以外のウェブマスターツールも、ここで関係づけできるようです。

Privacy Settings

プライバシー設定。
Cookie の使用の同意確認をユーザーに対して行うかどうか、選べます。On にすると、AMP ページを開いた際、ページの下の部分に、こんな風に表示されます。

GDPR は、EU の一般データ保護規則で、サイト運営者はユーザーの同意を得る必要があるのですが、日本ででしたら関係ないと思います。

Advertisement

サイトにアドセンス広告を貼っている場合、表示位置が決められます。
「ヘッダー」「フッター」「コンテンツ上部」「コンテンツ下部」から選べます。

3rd Party Compatibility

他の SEO プラグインを利用している場合、ここで選択すると、競合しないようにしてくれます。
すばらしいですね!(WordPress のオフィシャルの方の AMP プラグインも利用してみたのですが、この機能がなく、All in SEO Pack と衝突してエラーになったりしましたから)

Settings (設定)

項目が多くて、「Setup (基本セットアップ)」と重複するものもあるので、いくつかだけピックアップしてみました。

SEO

Meta Description」は、投稿や固定ページの「要約」文を含めるタグです。 ON にすると、head タグに加わります。
OpenGraph Meta Tags」は SNS 情報を連携させるタグです。ON にすると、head タグに加わります。
Head Section」に、その他 head に書き込みたいことを記述します。
SEO Plugin Integration」基本設定の部分にもありましたが、他の SEO プラグインを利用している場合、ここでそれを選んでおくと、競合を防げます。
Advanced Indexing」”URL Inspection Tool Compatibility (Google URL 検査ツールとの互換性)” を ON にできます。

AMP for WP Page Builder

ON にすると、各投稿ページの下の方に、このように、AMP for WP Page Builder のコーナーが現れ、ページ毎にレイアウトを調整することができます。(各ページに現れる AMP 設定機能は、後でまとめて説明します)

Structured Data

AMP 用の構造化データを作ることができます。

Comments

AMP ページにコメントを載せるか選べます。

Translation Panel

デフォルトで表示される言語が英語なので、ここで対応する日本語の表示内容を記述できます。

Design (デザイン)

Themes

テーマを選びます。無料で選べるのは、4種類です。

Header

ヘッダーデザイン、メニュー等を設定します。
メニューに関しては、一つ、気を付けないといけないのですが、WordPress のメニュー欄の「外観」⇒「メニュー」の下の方に表示される「メニュー設定」で、「AMP Menu」にチェックを入れていないと、AMP ページのメニューが空になってしまいます。
↓ この図の部分ですね。チェックを必ず入れましょう。

その他、「Home Page」では、「Single」では投稿ページ、「Page」では固定ページの表示内容を設定することができます。
「Social sharing」では、SNS へのリンクの表示のされ方が、様々な種類の中から選べるので、実際に実装してみて、お気に入りのものを選ぶといいと思います。

AMP for WP の各ページで行う設定

別ページにしました。⇒【WordPress プラグイン】AMP for WP 投稿画面

【WordPress プラグイン】Markup (JSON-LD) で パンくずリスト作成

Markup (JSON-LD) プラグイン

WordPress のプラグイン、Markup (JSON-LD) は、すべてのページの head に簡単に構造化データを記述できます。
Markup (JSON-LD) 概要説明
構造化データについて

今回は、Markup (JSON-LD) を利用して、構造化データのパンくずリスト、それから WordPress のテーマの中に人が見る用のパンくずリストを作りたいと思います。

パンくずリストの情報登録

↑ の登録画面の画像に赤字で要点を書き込みましたが、もう少し詳しく ↓ の表にまとめました。

項目 説明
Enabled マークアップ有効化。
「出力ページ」で指定したページの head に、パンくずリストの構造化データが書き込まれます。
出力ページ パンくずリストでは、「すべてのページ」しか選択肢はありません。
他のタイプだと、「ポスト」「ホーム」など、構造化データを書き込むページが選べます。
Display Home Page 「Enabled」にチェックをすると、パンくずリストにホームページが含まれます。

ホームページを含める例: ホーム > CSS > ボタンジェネレーター
ホームページを含めない例: CSS > ボタンジェネレーター

Home Name 空欄に、パンくずリスト上で表示するホームの名前を記入します。

例:「ホーム」「Home」「トップ」
何も記入しないと、デフォルトの bloginfo(“name”) が表示されます。

Home Url パンくずリストに利用するホームの URL を選択します。WordPress のディレクトリとホームページとしている URL が異なる場合、WordPress の設定でそれを登録している場合など、ここで設定できます。
Display Current Page 「Enabled」にチェックをすると、構造化データを書き込むそのページ自身が、パンくずリストに含まれます。

「ボタンジェネレーター」というページの場合
自身のページを含める例: ホーム > CSS > ボタンジェネレーター
自身のページを含めない例: ホーム > CSS >

Current Page Link 「Enabled」にチェックをすると、パンくずリストに、自身のページのリンクを含まれます。構造化データに関しては、リンクがあるかないかは関係ないのですが、Markup (JSON-LD) では、ショートコードを使って、人が見る用のパンくずリストをテーマに出力することができ、その時のリンクをここで定義します。

「ボタンジェネレーター」というページの場合
自身のページのリンクを含める例: ホーム > CSS > ボタンジェネレーター
自身のページのリンクを含めない例: ホーム > CSS > ボタンジェネレーター

Short Code Copy Markup (JSON-LD) では、ショートコードを使って、人が見る用のパンくずリストを、WordPress のテーマに出力することができます。
[wp-structuring-markup-breadcrumb] というショートコードを利用します。また、オプションで id と class を指定できます。詳しくは、このページの下の「ショートコードを利用して人が見る用のパンくずリストを出力する」の項をご覧ください。

サイト全体に対する、パンくずリストの構造化データの記述は、これだけで終了です。あっという間にできてしまいますね。

Google 構造化データ テストツールで確認

構造化データが想定通りに記述されているか、Google の構造化データ テストツールで確認します。
ページの種類(投稿ページ、ホーム、一覧ページ)ごと、それぞれの任意のページを確認するのがよいかと思います。

ショートコードを利用して人が見る用のパンくずリストを出力する

ショートコードを利用して、パンくずリストを WordPress のテーマの中に出力することができます。
「css」というカテゴリーの中にある「ボタンジェネレータ―」というページの投稿に書き込んだ場合、こうなります。

ショートコード

[wp-structuring-markup-breadcrumb]

出力される HTML

<ol>
  <li><a href="https://web.hazu.jp">ホーム</a></li>
  <li><a href="https://web.hazu.jp/category/css/">CSS</a></li>
  <li>ボタンジェネレーター</li>
</ol>

ブラウザ表示

番号付きリストの形で出力されますね。
これをよくある横並びのパンくずリストの形に、CSS で調整します。
Markup (JSON-LD) のショートコードには、id と class を付け加えることができます。

ショートコード(id、class 付き)

[wp-structuring-markup-breadcrumb id="id_name" class="class_name"]

出力される HTML(id、class 付き)

<lo id="id_name" class="class_name">
  <li><a href="https://web.hazu.jp">ホーム</a></li>
  <li><a href="https://web.hazu.jp/category/css/">CSS</a></li>
  <li>ボタンジェネレーター</li>
</ol>

CSS

.class_name {
	list-style-type: none;
	
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;	
}

.class_name li + li::before {
	content: '> '; 
}

Flexbox で li 要素を横並びにして、li 要素間に「 > 」を書き加えます。

ブラウザ表示

これでパンくずリストの形なりましたが、これをすべてのページのタイトルの上の部分に、一括で表示させるようにします。
投稿ページなら single.php、固定ページなら page.php にショートコードを埋め込みます。もっと上、ヘッダーの位置なら、header.php です。
(子テーマがあるなら、single.php、page.php、header.php を子テーマの中にアップロードして編集します。なければ、テーマの中のものを直接編集します。)

<?php
  if ( shortcode_exists( 'wp-structuring-markup-breadcrumb' ) ) {
  echo do_shortcode( '[wp-structuring-markup-breadcrumb id="id_name" class="class_name"]' );
  }
?>

この php コードを、パンくずリストを表示させたい位置に書き込みます。
私は、single.php のこの位置に書き込みました。

あとは、CSS で、文字のデザイン、表示位置の微調整をすれば完成です。

【WordPress プラグイン】Markup (JSON-LD)

Markup (JSON-LD) プラグイン

ウェブサイトにパンくずを付けたいな、構造化データにしつつ、ブラウザでも表示されるようにしたいな、JSON-LD でまとめて簡単に実装できるの無いかな、と WordPress のプラグインを見ていたら、色々なのがありますね。
その中から評価の高い「Markup (JSON-LD)」を試してみました。

WordPress オフィシャルページ Markup (JSON-LD) structured in schema.org

Markup (JSON-LD) の設定


プラグイン新規追加で、「Markup (JSON-LD)」を有効化後、左のメニュー欄に「Schema.org 設定」というメニューが追加されます。クリックすると、「Schema.org list」と「Schema.org Config」というサブメニューが表示されます。

Schema.org list


「Schema.org list」をクリックすると、Schema.org 設定一覧が表示されます。

このプラグインで設定できるタイプは、この11項目です。一般的によく使うものが揃っていますね。各タイプをクリックすると、登録内容を編集できます。

↓ に、各タイプの説明をまとめました。自分のウェブサイトに必要なものだけ実装できます。

タイプ 説明
Article 記事一般。ニュースやブログ投稿も含まれる。
Blog Posting ブログ投稿
Breadcrumb パンくず
Event イベント情報
Local Business 店舗やオフィスの営業情報
News Article ニュース記事
Organization 企業・組織情報
Person サイト管理者情報
Site Navigation サイトのナヴィゲーション(メニューなど)
Video 動画
Web Site ウェブ・サイト情報

Schema.org Config


「Schema.org Config」では、構造化データの圧縮を設定できます。「Enable」にチェックを入れると、データの改行、余白をなくして出力されます。

実際にどのように反映されているのか、HTML を確認してみました。

↓ こちらは圧縮されていない状態です。改行、余白が入っていて目視でも見やすいです。

↓ こちらは圧縮された状態です。改行がなく、ずらずらと書かれていて、目視では見づらいです。

他の SEO プラグインとの競合

他の SEO 機能のあるプラグインやテーマを利用していて、構造化データのオプションを有効にしている場合、データがダブってしまうことが考えられます。その場合、どうなるのでしょうか?Google の構造化データテストツールを利用して、調べてみました。

このサイトでは、All in One SEO Pack を利用しているので、そちらの Schema Setting と、こちら Markup (JSON-LD)、どちらも利用した場合を考えてみます。

All in One SEO Pack、Markup (JSON-LD) 両方ともに同じタイプを登録した場合

All in One SEO Pack は、タイプを自分で選択できず、様々な構造化データが自動で書き込まれます。Google のテストツールで何が検出されるのかは場合によるようですが、このサイトの投稿ページだと「Article」タイプで検出されていたので、Markup (JSON-LD) にも「Article」を登録してみました。
この状態で 構造化データテストツールで検証してみると・・・


二つともエラーにならずに、Google にちゃんと読み込まれていますね。
出力された HTML を確認すると、head の中に、All in One SEO Pack と Markup (JSON-LD) の script タグが、別々に生成されています。
構文的にエラーはないとのことのようですが・・・、でも情報がダブってしまうのはよくないと思うし、HTML も余計に長くなってしまうから、どちらか一つのみ有効にした方がいいのでしょう。

All in One SEO Pack、Markup (JSON-LD) に異なるタイプを登録した場合

All in One SEO Pack で「Article」、 Markup (JSON-LD) で「Breadcrumb」を登録して、構造化データテストツールで検証しました。


それぞれのタイプが、Google に読み込まれていますね。
HTML を確認すると、head の中に、script タグが、別々に生成されています。
問題なさそうです。

【WordPress プラグイン】All in One SEO Pack – その2 機能管理

all in one seo pack logo

WordPress のプラグイン、All in One SEO Pack についてまとめています。
その1 一般設定
その2 機能設定 ← 今回

WordPress の左のメニュー欄 →「 All in One SEO 」→「機能管理」をクリックすると、このような画面が表示されます。

デフォルトでは「パフォーマンス」のみ有効化されていますね。
それぞれの項目の「 activate 」をクリックして有効化すると、左のメニューにその項目が追加されます。
追加されたメニューをクリックすると、それぞれの設定画面が表示されます。

目次
1. XML サイトマップ
2. ソーシャルメディア
3. Robots.txt
4. ファイルエディター
5. インポーター&エクスポーター
6. 悪意あるボットのブロッカー
7. パフォーマンス

XML サイトマップ

XML サイトマップ とは?
ウェブサイト内の各ページのURLや優先度、最終更新日、更新頻度、画像数などを記述したXML形式のファイルで、ウェブサイトの状態を検索エンジンに知らせる重要な役割を持っています。クローラーに分かりやすく伝えることで、サイトのパフォーマンスを向上させます。

サイトマップのステータス

「 XML サイトマップを表示」という部分をクリックすると、All in One SEO Pack によって生成された XML サイトマップが表示されます。

「 Images 」→ 画像数
「 Priority 」→ 優先度
「 Change Frequency 」→ 更新頻度
「 Last Change 」→ 最終更新日時

この内容は、以下の XML サイトマップの設定が反映されています。

XML サイトマップ

RSS サイトマップを作成
サイトマップは XML サイトマップの他に、RSS フィードを利用したサイトマップもあります。RSS では、最近の変更を記述するので、容量が小さく、結果を素早く反映させることができます。更新の多いサイトは、XML、RSS どちらも利用するのが良いようです。

更新を予約
どの頻度でサイトマップの更新を検索エンジンへ通知するのかを予約します。コンテンツの更新頻度と同程度がよいとされています。
(↓ で、「サイトマップを動的に生成」という項目があり、サイトの更新ことにサイトマップを更新させることもできるので、そちらを選択している場合、予約は特には必要ない気がします。)

サイトマップインデックスを有効化
サイトマップインデックスは、サイトマップが多数ある場合、分割する仕組みです。1,000 URL 以上のサイトマップの場合、サイトマップインデックスを利用することが推奨されています。

サイトマップページあたりの最大投稿数
最高で 50,000 まで指定できますが、デフォルトでは 1,000 で、↑ のサイトマップインデックスと組み合わせて利用するようになっています。

投稿タイプ
サイトマップ内に表示する投稿タイプを選択します。デフォルトでは全てにチェックが入っています。

タクソノミー
タクソノミーとは、投稿データをグループ分けするための「分類」のことです。どのような分類を、サイトマップに含めるか選択します。デフォルトでは全てにチェックが入っています。

日別アーカイブページを含める / 投稿者ページを含める
この項目はデフォルトでチェックが入っていません。オフィシャルの英語の説明を読むと、投稿や固定ページをクロールされるだけで、日別アーカイブや投稿者ページを検索エンジンは十分認知でき、ここで敢えてサイトマップに含めることで、Google に「重複」とみなされる恐れがあるとのことです。それでも、それなりに意図があるなら、チェックを入れましょう。

画像を除外
デフォルトでは、画像は含まれますが、サイトマップに画像を含めたくない場合、チェックを入れます。

サイトマップを動的に生成
サイトを更新する度に、自動的に新しいサイトマップを生成します。デフォルトではチェックが入っています。

追加ページ

WordPress で作ったサイトは、全て自動でサイトマップに含まれますが、それ以外はここで手動で登録します。
ページ URL は絶対 URL を記入します。
ページ優先度 ですが、% ではなくて、0.1 ~ 1.0 となっていますね。0.1 が 10%、1.0 が 100% となります。↑ のサイトマップのステータスで、他のページが何 % なのかを確認して、参考に決めるのがよいかと思います。

除外項目

除外単語 では、サイトマップから除外したいカテゴリー、タグ、またはカスタム分類が、ドロップダウンメニューの中から選べます。
除外ページ では、サイトマップから除外したい固定ページを指定できます。(投稿ページではない。)固定ページスラッグまたは固定ページ ID を、複数ある場合はカンマで区切って記入します。

優先順位

優先順位とは、クロールの優先順位です。重要なページほどクロールしてほしいですね。
サイトマップステータスを見ると、初期状態では、更新頻度などを元に優先順位が % で表示されています。これを手動で変更することができます。% ではなくて、0.1 ~ 1.0 となっていますね。0.1 が 10%、1.0 が 100% となります。
% が高いほど優先順位が上ということになりますが、Google は、この優先順位を無視するらしいですね・・・。これを参考にする検索エンジンもあるので、きちんと指定はしておいた方がいいですね。

頻度

サイトマップステータスを見ると、初期状態では、実際の更新頻度に合わせた値が入っていますが、これを手動で変更できます。適切な更新頻度を指定することで、クロールを効率よくさせます。

ソーシャルメディア

OGP(SNS上でウェブページの内容を伝えるための情報)を設定します。
Facebook と Twitter については、特に細かく設定できます。

ここで設定したことで、WordPress の投稿が、Facebook や Twitter に自動リンクされる訳ではありません。
WordPress の投稿や固定ページののリンクを、Facebook や Twitter に投稿した際、どのように表示されるのか、というのを設定するということです。
Facebook なら、こんな風 ↓ に表示されます。(All in One SEO Pack のオフィシャルページにあった例です。)
画像やタイトル、ディスクリプションなどを設定できます。

機能設定より「ソーシャルメディア」を有効化させると、それぞれの投稿、固定ページの一番下、All in One SEO Pack の欄に「ソーシャル設定」というタブが表示されるようになります。

ホームページ設定

SNS に、WordPress でのサイトのホームページのリンクを投稿した場合、どのように表示させるか、という設定です。

AIOSEO の Title と Description を使用する にチェックを入れると、All in One Seo Pack の「一般設定」→「ホームページ設定」で設定したタイトルとディスクリプションがそのまま使われます。SNS 用に別に設定したい場合は、チェックを入れず、下の欄に記入します。
ホームタイトル は95文字まで。
ホームのディスクリプション は200文字まで。
ホーム画像 は、最低 600 × 315 ピクセルとなっていますが、Facebook では、1200 × 630 ピクセル以上が推奨されています。5MB 以内です。大きければ圧縮をかけましょう。(以前圧縮できるサイトを紹介しました。→ ウェブ画像の最適化

画像設定

ホームページ以外、投稿や固定ページのリンクを SNS に投稿する際、どの画像を表示させるかを設定します。この設定は、各編集ページでも設定できますが、デフォルトでどのようにするか、というのを設定します。

OG:Image ソースを選択 で、どこの画像を使用するかを設定できます。
「デフォルト画像」を選んだ場合、この欄の下でデフォルト画像を設定します。
画像の大きさは、600 × 315 ピクセル以上ですが、Facebook は、1200 × 630 以上を推奨しています。5MB 以内です。大きければ圧縮をかけましょう。

Facebook 設定

Facebook 管理者 ID
ID の取得方法
① Facebook のプロフィールページで、適当にどこでも空いているところを右クリック →「ページのソースを表示」をクリック。もしくは、「Ctrl + U」でソースを表示させる。
② ブラウザの検索機能で、「 fb://profile/ 」という文字列を探す。それに続く数字が Facebook ID。
例:fb://profile/100000000000001
③ 数字をコピーして、All in One SEO Pack の Facebook 管理者 ID の欄にペースト

Facebook App ID
Facebook App ID を利用している場合、登録時に生成されたユニークアプリ ID を記入。

記事のタグを自動生成する
これはハッシュタグのことですね。Facebook で投稿する際、ハッシュタグ+キーワードという形で投稿できますが、この欄にチェックを入れると、そのタグを自動生成するための項目が3つ表示されます。
「記事のタグにキーワードを使用」→ 記事においてメタ・キーワードを設定している場合、それがFacebook のハッシュタグとして使われます。
「記事のタグにカテゴリーを使用」→ カテゴリー名が、Facebook のハッシュタグとなります。
「記事タグで投稿タグを使用」→ 投稿のタグ名が、Facebook のハッシュタグになります。

投稿タイプの Facebook メタを有効にする
Facebook において、OGP(Facebook にウェブページの内容を伝えるための情報)を行う投稿タイプを選びます。
普通は、「投稿」と「固定ページ」でよいと思います。
他の投稿タイプについては、All in One SEO Pack その1 一般設定の「コンテンツタイプ設定」でまとめましたので、そちらをご参照ください。

Facebook Publisher の記事を表示
Facebook ページ(企業などが情報を発信するページ)で、WordPress のサイトのリンクを投稿したい場合、ここにそのページの URL を書き込みます。

記事に Facebook の著者を表示
チェックをすると、WordPress のメニューより「ユーザー」→「あなたのプロフィール」→「All in One SEO Pack」のすぐ下あたりの「Facebook」(チェックを入れないとこの項目は表示されない)で選択した名前が表示されます。

投稿 オブジェクト型 / 固定ページ オブジェクト型
記事の内容を最もよく表しているものを、デフォルトとして選びます。

Twitter 設定

デフォルト Twitter カード
Twitter カードとは、ツイートに貼り付けられる記事へのリンクの見せ方のことです。
「要約」→ タイトル、ディスクリプション、ドメイン
「要約の大きい画像」→ 画像、タイトル、ディスクリプション、ドメイン

Twitter サイト
Twitter のユーザー名を記入します。@ マークから始まるあれです。@ も含めて記入します。

Twitter 投稿者を表示
チェックをすると、WordPress のメニューより「ユーザー」→「あなたのプロフィール」→「All in One SEO Pack」のすぐ下あたりの「Twitter」(チェックを入れないとこの項目は表示されない)で選択した名前が表示されます。

Twitter ドメイン
WordPress のサイトのドメインを、http:// を抜かして記入します。例えばこのサイトなら、hazu.jp となります。Twitter カードに表示されます。

Robots.txt

検索エンジンのクローラーにサイトのページへのアクセスを禁止・許可を設定します。

ユーザーエージェント
アクセスの禁止・許可を指示する検索エンジンを選びます。→ 検索エンジン一覧 全ての検索エンジンを選択する場合は、「*」(アスタリスク)を入力します。

ルール
「許可」もしくは「許可しない」を選択します。

ディレクトリ
クローラーのアクセスを禁止・許可する、ディレクトリやファイルへの有効なパスを入力します。例: /wp-admin/ など。

上記を入力の上、「ルールを追加」をクリックすると、下のルール欄に追加されます。

ファイルエディター

.htaccess を直接編集できます。ファイルをアップロードする手間は省けますね。
.htaccess とは何なのか、以前まとめました。よろしければ、ご参照ください。→ 【.htaccess】設定ファイルで出来ること

インポーター&エクスポーター

All in One SEO Pack の設定を、バックアップしたり、他の WordPress のサイトで利用したりするときに、便利な機能です。

インポート
前にエクスポートしたものがあるなら、それをインポートできます。

設定のエクスポート
「一般設定」→ All in One SEO Pack の「一般設定」に入力した内容のエクスポート(有効化されている機能管理設定も)
「投稿データ」→「投稿」や「固定ページ」など、それぞれのページに入力した All in One SEO Pack の内容のエクスポート

投稿タイプをエクスポートする
↑ の「設定のエクスポート」で「投稿データ」を選んだ場合、どのタイプの投稿データをエクスポートしたいのか選びます。

悪意あるボットのブロッカー

ボットとは、自動化されたタスクを実行するアプリケーションソフトウェアのことです。悪意のあるボットをブロックする機能です。

HTTP を利用した悪質なボットをブロック
サイトへアクセスを集中させ「503エラー」(Service Unavailable というエラーメッセージが表示される)を引き起こすことが目的のボットをブロックします。チェックを入れた方がいいです。

HTTP を利用したリファラスパムをブロック
リファラスパムとは、アクセス元を確認しようとする人をスパムサイトへ誘導するスパムです。チェックを入れた方がいいです。

ブロックされたボットを追跡
ブロックされたボットのログを確認できる機能で、個別に確認した人はチェックを入れます。

カスタムブロックリストを使用
ネット世界でスパムボットと認識されているけれど、まだブロックされたログにない場合、ブロックリストに追加することができます。

パフォーマンス

これはデフォルトで有効化されている機能ですね。

パフォーマンス

メモリ上限を上げる
PHP のメモリ制限ですが、普通はデフォルトの 256MB で問題ありません。サイトに「PHP Fatal error: Allowed memory size of 268435456 bytes exhausted」と表示されるようなときは、「wp-config.php」に「define( ‘WP_MAX_MEMORY_LIMIT’, ‘512M’ );」と書き換えます。

実行時間を延長する
PHP スクリプトの実行時間です。デフォルトの「システム標準を使う」で問題ありませんが、実行時間に問題がある場合、調整します。

強制的にリライトする
テーマや他のプラグインによるタイトルタグの書き換えが発生してしまう場合、この設定を有効化し、確実にタイトルが書き換えられるようにします。

システム状況

現在のシステム状況が確認できます。
「デバック情報をメールで送信する」にメールアドレスを入力して、送信することができます。

【WordPress プラグイン】All in One SEO Pack その1 一般設定

all in one seo pack logo

SEO (ウェブサイト最適化) ・・・サイトを運営するなら知らなくちゃいけないことですよね。SEO について、私はほとんど知識がないのですが、基本的に行われていることぐらい出来るようになろうと、ゼロから勉強していきたいと思います。

WordPress には、SEO 効果が含まれるテーマなんかもありますね。それから様々なプラグインも。今回は、利用者の非常に多いプラグイン「All in One SEO Pack」の設定を一つ一つ確認することで、そこで何が行われているのか理解したいと思います。
All in One SEO Pack 公式ページ

All in One SEO Pack を2回に分けてまとめます。
その1 一般設定 ← 今回
その2 機能設定


新規プラグインから All in One SEO Pack をインストール、有効化すると、左のメニューに表示されます。

デフォルトでは「一般設定」「パフォーマンス」「機能管理」というサブメニューが出ますが、今回は、「一般設定」を確認していきます。

「一般設定」の中の項目を一つずつみていきます。

一般設定

カノニカル URL

URL の正規化です。重複、類似のフェブサイトがある場合、検索エンジンは独自性の低いコンテンツとして評価し、リンクポピュラリティーが下がってしまう恐れがあります。なので、それらのページを優先させる URL にまとめる仕組みです。

一般的に、このような場合に利用します。
1. EC サイトなどで、色違いなど、URL の異なる類似商品ページが複数ある場合
2. PC とモバイルで、内容が同じだけど URL の異なるページがある場合
3. テストページとして、内容がほとんど同じだけど URL の異なるページがある場合
4. AMP HTML (モバイル用高速化ページ)が実装されている場合

この項目にチェックをいれると、カノニカル URL が自動的に生成されます。

Canonical URL をページ送りしない

↓ のように、コンテンツを複数のページ分けて、ページネーション(ページ分け)が設置されている場合がありますね。

あるページに置いて、カノニカル URL に指定されたページが、例えば http://example.com だったとします。このページに、ページネーションが設置されている場合、1ページ目は http://example.com だけど、2ページ目は http://example.com/page/2/ と表示されることが考えられます。
この項目にチェックをいれると、カノニカル URL に指定されたページにページネーションがある場合、2ページ目以降の URL はカノニカル URL に含まれません

デフォルトのタイトルを利用する

All in One SEO Pack では、ここの設定画面や、各投稿やページ画面において、タイトルとディスクリプション(ページの説明)を設置していくのですが、すでに他のプラグインや SEO 機能のあるテーマなどで、タイトルを設置している場合、競合してしまいます。

「有効」→ 他のプラグイン等(デフォルト)でのタイトルを優先
「無効」→ All in One SEO Pack でタイトルを設置

重要なイベントを記録する

チェックをすると、重要なイベントのログ(重要なイベントとは何を意味するのか分かりませんが・・・)が作成されます。wp-content ディレクトリの中に、all-in-one-seo-pack.log というファイルが作られるようです。書き込みができるよう、このディレクトリの権限を変更しておきます。All in One Seo Pack のプレミアムサポート(有料)を受ける場合、ログが必要なようです。

ホームページ設定

検索エンジンでの表示結果はこんな風ですよね。

All in One SEO Pack では、このタイトルとディスクリプション(説明)を設定できます。この一般設定の画面では、ホームページに対しての設定を行います。投稿ページ、固定ページ毎の設定は、それぞれの編集画面の下に記入欄が表示されるので、そちらで行います。

ホームタイトル

サイト名を記入します。これは、検索エンジンの結果の表示のタイトルとなります。また、ブラウザでサイトを表示した際、上のタブの部分にも表示される文字列となります。簡潔(最大60文字)で適切であることが重要です。

ホームのディスクリプション
サイトの説明を記入します。ここにキーワードを含めた方がいいみたいですが、キーワードの羅列ではなく、簡潔(最大160文字)で適切な文章であることが重要です。

固定フロントページを代用

「有効」→ 固定ページをホームページに設定していて(左のメニューバー「設定」→「表示設定」→「ホームページの表示」→「固定ページ」)、そちらで設定したホームタイトルとディスクリプションを利用したい場合
「無効」→ こちらの設定で、ホームページのタイトルとディスクリプションを設定する場合

タイトル設定

検索結果に表示されるタイトルが、条件別に設定できます。

例えば「投稿タイトルのフォーマット」を見ると、デフォルトで「%post_title% | %site_title%」となっていますね。
このブログのこの投稿を例とするなら、こうなります。
post_title → 「【WordPress プラグイン】All in One SEO Pack 」
site_title → 「 Hazu Labo 」
表示タイトル → 「【WordPress プラグイン】All in One SEO Pack | Hazu Labo 」

post_title は、各投稿ページで変更もできます。

コンテンツタイプ設定

SEO を行うコンテンツタイプを選びます。
一般的には、「投稿」、「固定ページ」をチェックすればいいと思います。
この2項目は、チェックを入れると、各投稿、固定ページの編集画面の下の方に、それぞれのページを個別に SEO の値を設置するための記入枠が表示されます。

どうやらここの項目は、他のプラグインの利用状況で異なるようです。私の場合、「 Simple Custom CSS & JS 」というプラグインを利用しているのですが、それに伴って、「 Custom Code 」という項目が追加されています。

他の項目は、↓ のようなコンテンツを意味しています。SEO を行うなら、チェックを入れます。
ただし、これらにチェックを入れると、それぞれが個別に検索結果として表示されることになるので、注意しなくてはいけません。

「メディア・添付ファイル」→ 画像など
「 oEmbed Response 」→ 動画などの埋め込み
「 ユーザリクエスト 」→ 投稿タイプが user_request のコンテンツ(フォームや認証など)
「 ブロック 」→ 投稿タイプが wp_block のコンテンツ。ブロックエディター (Gutenberg) で、再利用可能ブロックに登録されている内容

これらの項目にチェックを入れると、追加で、それぞれの項目のタイトル設定の記入欄が追加されます。デフォルトを変更したければ、記入します。

表示設定

デフォルトでは、「投稿」、「固定ページ」にチェックが入っています。
ここでチェックをいれると、↓ のように「投稿一覧」、「固定ページ一覧」に、各ページで行った SEO の設定内容が表示されます。

私はまだ何も設定していないので、「いいえ」と表示されていますね。
一覧画面の右上「表示オプション」をクリックして、表示項目を選べます。

ウェブマスター認証

分析ツールを利用する場合、それぞれの確認コード入力し、所有権確認が行えます。
「 Google Search Console 」なら、ここに確認用のメタタグを入力します。
WordPress での Google Search Console の所有権確認について

Google アナリティクス

Google のウェブサイト解析ツール、アナリティクスを利用している場合は、ここで設定します。
登録はこちらから ⇒ Google アナリティクス登録ページ

Google アナリティクスを利用したことない方は、Google の提供する無料の「アナリティクス アカデミー」というコースがお勧めです。最短でアナリティクスの使い方が学べると思います。私も利用してみました。⇒ Google アナリティクス アカデミー で学ぶ

Google アナリティクス ID
普通、Google アナリティクスを利用するには、解析したい各ページの head タグの開始直後に、トラッキングコードを記述しなくてはいけないのですが、All in One SEO Pack のこの欄に、Google アナリティクスのトラッキング ID を登録することで、SEO を行うサイト内のすべてのページに、自動的にトラッキングコードを実装できます。

Google アナリティクスのトラッキング ID の確認方法
アカウントログイン後、[管理] タブ > [トラッキング情報] > [トラッキング ID]

高度な分析オプション
「有効」を選択すると、その下に詳細の設定が表示されます。

ドメインのトラッキング
クッキー ドメインの設定を変更したい場合、ここに書き込みます。
ドメインと Cookie について
デフォルトでは auto になっています。特に指定がなければ、空白で大丈夫です。

マルチドメインの追跡
複数のドメイン(サイト)をまとめたデータにしたい場合、チェックを入れます。

IPアドレスを匿名化する
サイトの訪問者の IP アドレスを匿名化したい場合、チェックを入れます。
当然、IP アドレスを利用した訪問者の地域情報などは収集できなくなります。

広告主のトラッキングを表示する
Google 広告を利用している場合、そちらのデータを、アナリティクスで利用したい際、チェックを入れます。
二つのサービスのデータを統合して検証するなどの場合、役立ちます。

トラッキングからユーザーを除外する
Google アナリティクスでは、サイトの訪問者の情報を収集しますが、サイトを運営している自分がサイトを訪れた場合、自分の情報も収集されてしまいます。自分が自分のページを 10 回、20 回見れば、その分 PV が加算されてしまいますね・・・。
ここでは、トラッキングから除外する人を指定できます。

WordPress のユーザーの権限ごとに、設定できます。それぞれのユーザーの権限は、WordPress の左のメニュー欄、「ユーザー」→「ユーザー一覧」の「権限グループ」という欄から確認できます。
Administrator: 管理者
Author: 投稿者
Contributor: 寄稿者
Web Designer: ウェブデザイナー
Editor: 編集者
Subscriber: 購読者

外部へのリンクを追跡する
サイト内には、外部リンクが貼られてていることが多いと思います。
自分のサイトの訪問者が、どの外部リンクをクリックすることでサイト外に出ていったのか、ということを追跡します。

Schema Settings

schema.org とは?
ウェブサイトでメタデータを構造化し、検索エンジンが自分のサイトの情報を、より理解できるようにするものです。
例えば、電話番号なら、私たちは目で見て、それは電話番号だろうと想像できますが、検索エンジンはそうはいかないので、一定の決まったフォーマットに沿って、データを構造化します。

構造化データについてまとめた記事です。
構造化データでリッチリザルトを実現する

All in One SEO Pack では、構造化データの細かな設定は出来ないのですが、ここに必要事項を記入して、マークアップを有効化しておくと、一般的によく利用されるものが、まとめてマークアップされます。シンタックスは、「JSON-LD」になります。

schema.org マークアップを使用
「有効」を選択すると、設定項目が表示されます。

サイトリンクの検索ボックスを表示する
チェックを入れると、Google の検索結果で自分のサイトが表示された際、ディスクリプションの下に、検索ボックスが表示されます。その検索ボックスでは、自分のサイト内の検索が行えます。

ソーシャルプロフィールのリンク
ソーシャルメディア(Facebook、Twitter、Instagram 等)を利用している場合、ここにその URL を書き込みます。
1行につき、URL 1つです。Google Knowledge Graph の情報源となります。

個人または組織
ウェブサイトが個人的なものなのか、組織的なものなのか、選択します。

組織名(組織を選択した場合)
組織名を記入します。

組織のロゴ(組織を選択した場合)
組織や企業のロゴを追加できます。画像は PNG、JPG、GIF いずれかのフォーマットで 112 x 112 px 以上のサイズのものに限ります。画像が選択されていない場合、テーマのカスタマイザー設定で利用されているロゴ(があればですが)が利用されることがあります。

電話番号(組織を選択した場合)
組織の代表電話番号を入力します。国コードやハイフンも含めます。例: 81-888-8888-8888

Type of contact(組織を選択した場合)
上で記入した電話番号の種類を選択します。

担当者の名前(個人を選択した場合)
「WordPress のユーザー名」か、「手動で入力」が選択できます。
「手動で入力」を選択すると、名前の記入欄、写真やアバターなどの画像の追加欄が表示されます。

Noindex 設定

noindex とは?
検索エンジンに、インデックスさせないための設定です。検索結果に表示されなくなります。
内容の薄いページがインデックスされると、サイト全体の評価が下がってしまう恐れがあるので、そのようなページは noindex とした方がいいです。
noindex にしても、クローラーの巡回自体は行われるので、発リンクがある場合、ページランクは渡されます。

nofollow とは?
クローラーに巡回させないための設定です。リンクに対してクローラーの巡回を禁止し、評価を引き渡しません。

NOINDEX をデフォルトにする
各投稿ページで、noindex にするかどうか選べるのですが、デフォルトでどうするのか、ということを選択します。
基本的には、特にチェックは必要ないと思います。

NOFOLLOW をデフォルトにする
各投稿ページで、nofollow にするかどうか選べるのですが、デフォルトでどうするのか、ということを選択します。
基本的には、特にチェックは必要ないと思います。

以下、「カテゴリー」「日付別アーカイブ」「投稿者アーカイブ」「タグアーカイブ」「検索ページ」「404ページ」「ページ/投稿のページ送り」「固定ページ/投稿のページ送り」、それぞれの項目に、noindex、nofollow を適用する場合、チェックするのですが、基本的には全てチェックしていいと思います。

詳細設定

ディスクリプションを自動生成する
投稿の抜粋がある場合それを、ない場合は最初の160文字がディスクリプションとして、自動的に生成されます。

ページ区切り付きページの説明を削除する
↓ のように、コンテンツを複数のページ分けて、ページネーション(ページ分け)が設置されている場合、2ページ目以降の説明文は検索エンジンに拾われなくなります。情報の重複を避けることができます。

長いディスクリプションを短縮しない
デフォルトでは、160 字までとなっています。
Google では、ディスクリプションは 160 字の文字制限があるので、どちらにしろ、160 字までしか表示されません。

投稿メタフィールドの保護を解除する
カスタムフィールド(自分で作ったページ)内や、WordPress Moble のようなアプリで、XMLRPC を利用する場合、チェックを入れます。

添付ファイルを親投稿へリダイレクトする
画像などの添付ファイルに対して、そのリンクから送付元のページに飛べるようにしたい場合、チェックを入れます。

固定ページを除外する
All in One SEO Pack の設定から除外したいページを、ここに記入します。
カンマで区切って入力します。
特になければ空欄のままでいいです。

投稿のヘッダーに追加する / 固定ページのヘッダーに追加する / フロントページのヘッダーに追加する
ここに記入したことが、全ての投稿ページ、または全ての固定ページ、またはフロントページのヘッダーに書き込まれます。
HTML のヘッダーに書き込めるものなら、なんでも大丈夫なようです。

キーワード設定

メタキーワードの設定を行うのですが、メタキーワードは Google は無視するらしいので、あまり意味が無いと言われていますね。
なので、基本的には「無効」でよいと思いますが、「有効」を選択すると、「コンテンツタイプ設定」で「SEO を行うコンテンツタイプ」で選んだ各編集ページで、キーワードを書き込む欄が表示されるようになります。


【WordPress】タグなどの自動整形機能の無効化・有効化

WordPress Logo

WordPress のコードエディターでは、改行タグを付けなくても、編集画面上で改行していれば <br /> タグが足されたり、自動で <p> タグを補ってくれたり、とても便利ですよね。
でも、こちらがわざわざ書き込んだものを勝手に消されたり、または勝手に付け加えられたり、何してくれてんだよー!なんて思うこともあります。便利な自動整形機能が邪魔に感じることも・・・。

この自動整形機能、function.php に remove_filter() 関数を書き込むことで取り除くことができます。
また、add_filter() 関数で追加も可能。
自動整形機能の関数は、wp-includes ファイルの中の formatting.php で定義されていますが、それぞれの関数の詳細は、こちらに一覧があります。
formatting.php の関数リスト(英語)

自動整形無効化(全ての投稿に適用)

remouve_filter($tag, $function_to_remove) という書き方ですが、変数の意味はこのようになります。
$tag = フィルターフック(除去したい関数が追加されている場所)
$function_to_remove = 除去したいコールバック関数

子テーマ(なければテーマ)の中の、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。

wpautop() 関数を無効化 (<p> タグ、 <br /> タグの自動挿入無効化)

remouve_filter('the_title', 'wpautop');  // タイトル蘭
remove_filter('the_content', 'wpautop');  // 本文欄
remove_filter('comment_text', 'wpautop');  // コメント欄
remove_filter('the_excerpt', 'wpautop');  // 抜粋欄

wptexturize() 関数を無効化 (記号などの自動変換)

remouve_filter('the_title', 'wptexturize');  // タイトル蘭
remove_filter('the_content', 'wptexturize');  // 本文欄
remove_filter('comment_text', 'wptexturize');  // コメント欄
remove_filter('the_excerpt', 'wptexturize');  // 抜粋欄

自動整形無効化(部分的に適用)

ブログなどの投稿ページ (single.php)には、デフォルトの自動整形を有効化したままにして、固定ページ(page.php)のみ、自動整形を無効化したい、という場合もあると思います。その場合、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。wpautop() 関数を、固定ページでのみ無効化する例です。

function disable_page_wpautop() {
	if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

2行目、「is_page()」の部分を変更させることで、他の部分に適用することができます。

自動整形有効化

逆に、無効化されている自動整形の関数を有効化させるには、add_filter() 関数を利用します。
add_filter($tag, $function_to_remove)
$tag = フィルターフック(追加したい関数が追加されている場所)
$function_to_remove = 追加したいコールバック関数

make_clickable() 関数(プレーンテキストURIをHTMLリンクに変換)を有効化する例です。
(デフォルトでは、テキストエディターでの編集では、この関数は無効化されているようです。)
子テーマ(なければテーマ)の中の、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。

add_filter('the_content', 'make_clickable');  // 本文欄
add_filter('comment_text', 'make_clickable');  // コメント欄
add_filter('the_excerpt', 'make_clickable');  // 抜粋欄

以上、なんですが、一つ、分からないことがあります。

Gutenberg のテキストエディターで、<a> 要素に、<div> 要素を入れ子にすると(文法的には合っていますよね)、前後に、自動で空の <a> 要素が生成されてしまうのです。同じことを Classic エディターで行うと、そんな自動整形は行われません。これを取り除くべく、formatting.php と睨めっこして、どの関数がこのような振る舞いをしているのか突き止めようとしましたが、分かりませんでした。お手上げです。Gutenberg 特有の機能なんでしょうかね。ご存じの方、おりましたら教えてください。Classic エディターで編集することで解決はするのですが、どこの振る舞いか分からなかったのが、気持ち悪いです。検索しましたが、the_content のフィルターフックでこれを実現するには、自分で関数を作って追加する、なんていう方法もありました。でも、元の関数がどこにあるのか、知りたいです。

【WordPress プラグイン】投稿画面の幅などカスタマイズ

WordPress Logo

WordPress の投稿画面、私は基本的にはコードエディターを利用しているのですが、こうやって文字を打ち込んでいて、毎回毎回、不満に感じることがあります。

その1.入力画面の幅が狭い!
その2.プログラミング用のエディターみたいに色分けしてほしい!

↓ こういうことです。

投稿画面をカスタマイズできたら作業効率上がりますよね。イライラも解消です。
プラグインを利用して、この2点を実現してみました。

TinyMCE Advanced(幅広のクラシックエディターを利用する)

WordPress のエディターは、バージョン 5 からは、Gudenberg(ブロックエディター)になりましたね。バージョン 4 までのクラシックエディターは、デフォルトで投稿画面が幅広だったし、あちらの方が使いやすかったなー、という方もいらっしゃると思います。バージョン 5 で、クラシックエディターを利用するには、「Classic Editor」というプラグインがありますが、今回は、他にも色々設定ができて便利そうな「TinyMCE Advanced」を利用してみました。

プラグインの新規追加で「TinyMCE Advanced」をインストールし、有効化します。
「設定」⇒「TinyMCE Advanced」を選択し、「エディタ設定」ページを表示します。
そのページをずーっと下の方へスクロールしていくと、「高度なオプション」という欄があります。
「Replace the Block Editor with the Classic Editor」の欄にチェックをいれます。

これでクラシックエディターになりました!幅も広がりました。

「TinyMCE Advanced」では、他にもエディターに関する様々な設定が行えるので、自分好みに手軽にカスタマイズできますね。

Simple Custom CSS and JS(CSS 上書きで幅の指定をする)

クラシックエディターに戻したいわけじゃないよ!Gutenberg のままで幅広げたいよ!という場合は、エディターの CSS を書き直さなくちゃいけませんね。テーマの functions.php に新しく作った CSS を関連付けるコマンドを書き加えるという手順ですが、functions.php をいじらないで、CSS を書き加える「Simple Custom CSS and JS」というプラグインを利用してみました。

まず、投稿画面の幅を広げるための CSS ですが、ブロックエディター(ビジュアルエディター)では「wp-block」をいうクラスで、コードエディタでは、「edit-post-text-editor」というクラスで指定されています。デフォルトでは、「max-width: 610px」となっているようですね。これを好みの幅まで広げます。

.wp-block, .edit-post-text-editor {
  max-width: 900px;
}

さて、この CSS を投稿画面に反映させたいのですが、プラグインを利用します。
プラグインの新規追加で「Simple Custom CSS and JS」をインストールし、有効化します。
サイドメニューの「Custom CSS & JS」をクリックします。
「Custom Code」のページで「Add CSS Code」をクリックします。

① タイトル欄に任意の名前を入力します。
② コード入力欄に、先ほどの CSS を入力します。
③ 「In Admin」を選択します。(これは投稿画面に反映させる CSS という意味です。)
④ 「公開」をクリックします。

これで、ブロックエディター(ビジュアルエディター)、コードエディター共に、ぐーんと広がりました。
入力欄の幅だけでなくて、色々カスタマイズして、自分だけのオリジナルの使い勝手の良い投稿画面が作れそうですね。

HTML Editor Syntax Highlighter(タグを色分けする)

プログラミング用テキストエディターみたいに、タグを自動に色分けしてくれるプラグインです。

プラグインの新規追加で「HTML Editor Syntax Highlighter」をインストールし、有効化します。
ただそれだけ!色分けしてくるだけでなく、入力画面もいっぱいいっぱいまで自動で幅が広がります。
(カスタマイズされるのは、コードエディターのみです。ブロックエディターは変わりません。)

右上の歯車のマークをクリックすると詳細設定ができます。文字や背景の色など、見やすいように設定ができます。
右下の角の部分をドラッグすると、入力画面の高さを調整することができます。

ウェブ用画像の最適化

Cat and Dog

ウェブサイトを魅力的なものにしてくれる写真やロゴは、ウェブデザインの上で欠かせない要素ですが、たくさん利用するとサイトが重くなってしまいますよね。重いサイトは、ユーザがストレスに感じて、待てないよー!って、離脱してしまうかもしれないし、SEO的にも検索エンジンの低評価につながるので、画像の圧縮やリサイズなどの最適化は非常に重要です。

ウェブサイトに画像を利用する際、するべきこと

  1. 魅力的で適切な画像を利用する
  2. 適切なファイルフォーマットを選ぶ
  3. 圧縮、リサイズする
  4. SEO的に有効なファイル名、代替テキスト、キャプションを付ける

順番に見ていきます。

1. 高品質で適切な画像を利用する

ページの趣旨や文章に合った、魅力的な画像を利用することが大切ですね。
画像を自分で用意する、プロに依頼するなどありますが、ここではネット上で画像を提供しているサイトをいくつかまとめてみました。
利用規約がまちまちなので、しっかりと確認してください。

<無料の写真素材>

サイト名 内容
Pixabay.com 世界中のクリエイターによる100万点以上の高品質な画像素材を提供。海外のサイトですが日本語検索可。
PAKTASO 凡庸性の高い高品質な画像素材がストックされていて便利です。
GIRLY DROP 女の子好みのお洒落な画像がたくさん提供されています。
写真AC クリエイター投稿型の写真素材サイト。利用にはユーザ登録が必要。無料で利用できるのは、1日9個まで。
FIND/47 経済産業省のサイトで、日本全国の四季折々の写真が公開されています。見ているだけでも楽しいです。
Unsplash 100万点以上の高品質な写真を提供しているカナダの写真素材サイト。検索は英語で。
BURST ネットショップ作成サービスのShopifyが運営するフリー写真素材サイト。検索は英語で。
food.foto
Foodiesfeed
どちらも料理、食材に特化した写真素材サイトです。

<有料の写真素材>

サイト名 内容
PIXTA 国内最大級。月額プラン、単品で購入も可。
Adobe Stock 世界中の豊富な素材が利用できて、コスパいいです。日本語サイトあり。月額プラン、パッケージプランから選びます。
shutterstock 世界最大級の写真素材サイト。日本語サイトあり。月額プラン、パッケージプランから選びます。

<無料のアイコン>

サイト名 内容
FLAT ICON DESIGN お洒落感高めのアイコンがそろっています。背景色を選べます。
ICOOON MONO モノトーンのアイコン素材集。色味を調整してダウンロードできます。
アイコン配布中 スマホ用にデータが軽減されています。1日12個まで。
イラストAC 写真AC の姉妹サイト。1日9個まで無料。
iconmonstr 非常に豊富なアイコンの揃うドイツのサイトです。
ICONS8 ウェブ用デザインリソースを提供するアメリカのサイト。HTML に画像リンクを埋め込むこともできます。

<無料のイラスト>

サイト名 内容
イラストAC 写真AC、アイコンACの姉妹サイト。1日9個まで。
無料イラスト素材.com パーツとして利用できるイラストが豊富に揃っています。
EC design ネットショップに使い勝手のよさそうなイラストが揃っています。

2. 適切なファイルフォーマットを選ぶ

ウェブサイトの画像には、JPEG、PNG、GIF がよく利用されますね。最近よく利用される SVG も合わせて、特徴をまとめます。
画像の美しさ、ファイルの大きさにかかわってくるので、適切なフォーマットで保存することは大切です。

フォーマット 特徴
JPEG フルカラーで表現できるので、色数の多い画像をきれいに表示できる。
風景・景色・人物像など多くの色を使う写真に利用。
PNG フルカラーで高画質ですが、ファイルサイズが大きめです。透過処理もできる。
色数の多いイラストや、透過処理をする切り抜きの写真などに利用。
GIF 256色で構成されデータ容量が軽い。アニメーションや透過処理ができる。
色数の少ないロゴやイラストなどに利用。
SVG 拡大縮小しても画像が滑らかで、色やサイズの変更が簡単。複雑な形状や写真のように画素数の多いものには不向き。アニメーションや透過処理ができる。
アイコンなど複雑でない画像などに利用。

3. 圧縮、リサイズする

圧縮、リサイズは、Photoshop などの画像エディタツールを利用してできますが、ここでは圧縮、リサイズに特化したものをまとめます。

<ブラウザ上で加工>

サイト名 内容
Optimizilla 圧縮後の画像を見ながら、自分でクオリティを調整できます。日本語対応あり。
対応ファイル形式:JPEG、PNG
TinyPNG 一度に20個、簡単に圧縮ができます。圧縮率は自動で設定され、自分での詳細設定はできません。英語サイト。
対応ファイル形式:JPEG、PNG
Kraken.io DropboxやBox、Googleドライブからファイルをインポートしてアップロードできます。
無料版は圧縮のみですが、有料版はリサイズもできます。英語サイト。
対応ファイル形式:JPEG、PNG、GIF
Bulk Resize リサイズ用サービス。指定したサイズに、複数の画像をまとめてリサイズすることも可能。日本語対応あり。
対応ファイル形式:JPEG、PNG、WEBP

<WordPress プラグイン>
WordPress を利用している場合、自動で圧縮、リサイズを行うプラグインを利用できます。

プラグイン名 内容
Compress JPEG & PNG images ウェブサービスTinyPNG のプラグインバージョンです。
EWWW Image Optimizer 自動で簡単に画像の圧縮ができるプラグインです。
Simple Image Sizes リサイズ用のプラグインです。

4. SEO的に有効なファイル名、代替テキスト、キャプションを付ける

ファイル名: 画像に関連のある英語名。(例: sleeping-cat.jpg)
代替テキスト: 画像を簡潔に表す言葉。視覚障害者の方など、音声読み上げを利用している方には重要。(例: 眠り猫)
キャプション: 画像に関する説明・補足・注釈等の有用な情報。(例: 栃木県日光市の日光東照宮の回廊にある建築装飾彫刻作品)

また、画像の周辺のテキストは、検索エンジンが画像を理解する材料となります。画像と周辺の文字列の関連性も、SEO 的には重要です。

【WordPress】本文中に PHP を利用する方法

WordPress Logo

WordPress の投稿ページにしろ、固定ページにしろ、直接 PHP を書き込むことは出来ません。不便ですよねーーー。WordPress そのものを作っているプログラミング言語が PHP であるので、PHP をコンテンツに直接書き込むとセキュリティを落とすため、書き込みができなくなっているそうです。

WordPress の本文中に PHP を利用する場合は、ショートコードを作成して利用します。
(プラグインもあるようなのですが、セキュリティ上問題があるようですね。)

ショートコードとは

別個に作ったプロブラムファイルを、本文の中に埋め込むための仕組みです。
WordPress 側ですでに用意されているショートコードもたくさんありますね。
Available shortcodes
これを自分で作るのですが、既存のコードと同じ名前にならないようにしなくてはいけません。
functions.php において、コードとプログラムを関係づけます。

ショートコード作成・利用の流れ

① 組み込みたい内容の PHP ファイルを作成。
② functions.php で、① で作成した PHP ファイルを読み込むための関数を記述。その関数を呼び出すショートコードを作成。
③ WordPress 投稿・固定ページに、②で作成したショートコードを記述。

* functions.php に、投稿・固定ページに書き込みたい PHP のコマンドを、直接記述することもできます。短ければそれでもいいのでしょうが、複数ある、長い、となることを想定して、別の PHP ファイルを作成する前提としました。

それぞれのファイルの関係はこのようになります。

① 組み込みたい内容の PHP ファイルを作成

おなじみ “Hello, World!” という文字列を表示させるプログラムです。
これを投稿ページに埋め込みます。

ex.php

<?php 
echo 'Hello, World!';
?>

このファイルは、子テーマにアップロードします。(子テーマがなければ、テーマの中ですが、子テーマは用意しておいた方がいいです。)

② functions.php で、PHP ファイルを読み込むための関数を記述 + ショートコードを作成

子テーマの中の functions.php に記述します。(子テーマがなければテーマの中の)

functions.php

<?php

// 投稿ページのショートコードで指定された PHP ファイルを読み込む関数
function sc_php($atts = array()) {
  shortcode_atts(array(   /* shortcode_atts でショートコードの属性名を指定 */
    'file' => 'default'   /* 属性名とデフォルトの値 */
  ), $atts);   /* 属性を格納する変数 */
  ob_start();   /* バッファリング */
  include(STYLESHEETPATH . "/$atts[file].php");  /* CSSのあるパス = 子テーマのパスを指定 */
  return ob_get_clean();  /* バッファの内容取得、出力バッファを削除 */
}

// ショートコード作成(sc というショートコードは、sc_php()という関数を呼び出すという意味)
add_shortcode('sc', 'sc_php');
?>

何をやっているのか、一行一行コメントアウトしてみました。(ちょっと鬱陶しいかも 笑)

9行目の include(STYLESHEETPATH . “/$atts[file].php”);
ですが、STYLESHEETPATH は、CSS のあるディレクトリへのパスということです。
CSS は子テーマに入っているので、作成した PHP ファイルも、同じ子テーマに入っているという前提で記述しています。もし、子テーマでなく、別の場所に PHP ファイルがある場合は、そのパスを記述します。

③ WordPress 投稿・固定ページに、ショートコードを記述

PHP を埋め込みたい投稿または固定ページに、ショートコードを記述します。
ショートコードは、[ショートコード名 属性] という形になります。今回は、属性に呼び出したいファイル名を記述します。file という属性は、functions.php で規定しましたね。

[sc file='ex']

これでブラウザには、ex.php の中身、
Hello, World!
と表示されます。