WordPress – All in One SEO Pack – XMLサイトマップの設定方法

All in One SEO Pack をインストールして一般設定が終わったら、次は XML サイトマップを生成する設定を行いましょう。

この記事は以下の記事の続きになります。プラグインインストール後の一般設定が終わっていない方は、以下の記事を読んで設定を行ってください。

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

XML サイトマップとは?


運営しているブログにどんなページがあるのか(URL)、ブログ内の優先順位、更新頻度はどれくらいか、最終更新日、そういった情報を検索サイトに伝えるためのファイルのことです。

通常は sitemap.xml というファイルを自分で作成して、検索サイトに登録しなければならないのですが、All in One SEO Pack にはそれを自動で生成する機能がついています。この機能を使えば、後は検索サイトに生成された XML サイトマップの URL を登録するだけで、検索サイトのロボットがブログの記事を隅々までクロールしてくれるようになります。

WordPress で新しい記事を書くと、その記事の URL も自動で XML サイトマップに追加してくれるようになりますので、とても便利です。All in One SEO Pack をインストールしたら、こちらの設定も行っておきましょう。

完成品:このブログの XML サイトマップ

XMLサイトマップの設定方法


1. 機能管理ページに移動する

ダッシュボード > All in One SEO > 機能管理をクリック(タップ)して、機能管理ページに移動しましょう。

 

2. XML サイトマップを有効化する

XML サイトマップと書かれている部分の Activate ボタンをクリック(タップ)しましょう。表示が Deactivate に変わると、左のメニューに XML サイトマップという項目が追加されます。

 

3. XML サイトマップの設定ページに移動する

左メニューの XML サイトマップを選んでください。

 

4. 設定を行う

画像の矢印の場所で XML サイトマップの設定を行います。各項目について解説していきますので、記事を参考にしながら設定してみてください。

 

XML サイトマップ


サイトマップの基本的な設定を行います。

 

  • ファイル名接頭語

sitemap のままにしておきましょう。

サイトマップファイルのファイル名を設定します。デフォルトの設定の場合、sitemap.xml というファイルが生成されます。特別な理由がない限り、変更する必要はありません。

【公式解説文の翻訳】
ファイル名接頭語フィールドには、サイトマップの名前を設定できます。このフィールドにデフォルトで入力されている一般的な接頭辞「sitemap」を保持すると、ロボットがあなたのサイトマップを簡単に見つけることができます。

 

  • 更新を予約

更新の頻度に合わせて適切な値を選んでください。

毎日・毎週・月が選べます。毎日ブログを更新している場合は毎日を選んで、そこまで更新していない場合は毎週を選ぶのがいいでしょう。検索サイトに見に来てもらうよう促しますので、更新頻度が低い場合、毎日を選ぶのはやめておきましょう。

【公式解説文の翻訳】
サイトマップについてGoogleとBingに対してpingを実行するスケジュールを選択します。サイトのコンテンツを追加または更新する頻度に合わせて設定することをおすすめします。

 

  • サイトマップインデックスを有効化

チェックを外してください。

サイトマップには、1つのファイルに 50,000 個までの URL しか登録できないという制限があります。運営しているサイトがそれ以上のページを持っている場合は、サイトマップインデックスという複数のサイトマップをリスト化したファイルを用意して、膨大なページを検索サイトに伝えます。

50,000 ページもあるブログは普通ないと思いますので、基本的にはチェックする必要はありません。

【公式解説文の翻訳】
サイトマップに多数のURLがある場合は、[サイトマップインデックスを有効にする]をオンにする必要があります。これにより、サイトマップを作成してサイトマップを高速化するために必要なメモリ量が削減されます。あなたのXMLサイトマップを見て、あなたが持っているURLの数を調べてください。

サイトマップインデックスを使用する必要がある場合は、オールインワンSEOパックを使用してインデックスにページを設定し、サイトマップごとに投稿数を設定できます。このオプションは、[サイトマップインデックスを有効にする]チェックボックスをオンにした後に表示されます。

 

  • 投稿タイプ

投稿と固定ページをチェックしてください。

サイトマップに掲載するページを指定します。メディア・添付ファイルのチェックは外してください。

WordPress に画像をアップロードすると以下のような画像だけのページが自動的に生成されます。これを添付ファイルページと呼びます。

添付ファイルページは、画像とタイトルだけが表示される非常にシンプルなページですので、検索サイトからは有用なコンテンツのないページと認識される可能性があります。コンテンツのないページがサイトマップ内に大量に存在していると、検索サイトからの評価が下がってしまうかもしれませんので、メディア・添付ファイルのチェックは外しておくことをおすすめします。

【公式解説文の翻訳】
[投稿タイプと分類]セクションでは、サイトマップに含まれるコンテンツを管理できます。すべてのボックスはデフォルトでチェックされます。サイトマップインデックスを使用している場合は、チェックされている投稿タイプと分類ごとにファイルが作成されます。特定の投稿タイプまたは分類を使用していない場合、そのファイルはサイトマップ内で空白になりますので、サイトマップインデックスを使用している場合は、サイトに存在する投稿タイプと分類をチェックすることが重要です。

 

  • タクソノミー

カテゴリーとタグをチェックしてください。

こちらもサイトマップに掲載するページを指定します。

 

  • 日別アーカイブページを含める

チェックを外してください。

基本的には含める必要はないと思いますが、日別アーカイブページを重要視していて、サイトマップに含めたい方はチェックしてください。

例)日付別のアーカイブページ

https://gameusers.org/dev/blog/2018/01/

【公式解説文の翻訳】
日付アーカイブのページと著者ページの挿入は、Googleからの重複コンテンツの警告を避けるため、未チェックのままです。これは主に、GoogleがWordPressの仕組みを理解し、その内容をアーカイブして著者ページに含めることができるようになったため、従来の設定です。これをチェックするかどうかは、チェックするかどうか、重複するコンテンツの警告を受け取るかどうかはあなた次第です。設定を変更して変更をGoogleに通知するだけです。

覚えておいてください:あなたのサイトマップにコンテンツを含めていないからといって、Googleがそれを見つけてインデックスに登録するわけではありません。サイトのコンテンツにリンクすると、検索エンジンはそれらのリンクをたどってクロールしますので、NOINDEXの設定を使用して、All In One SEO Packを使用してどのコンテンツがインデックスに登録されるかを制御します。

 

  • 投稿者ページを含める

チェックを外してください。

基本的には含める必要はないと思いますが、投稿者ページを重要視していて、サイトマップに含めたい方はチェックしてください。

例)投稿者ページ

https://gameusers.org/dev/blog/author/az1979/

 

  • Exclude Images

チェックを外してください。

【公式解説文の翻訳】
デフォルトでは、オールインワンSEOパックには、Googleサイトマップに画像が含まれており、Googleなどの検索エンジンに準拠し、Google画像検索でインデックスに登録された画像を送信します。

一部のユーザーは画像を挿入したくない場合があります。たとえば、Yandexはサイトマップ内の画像をサポートしていません。 XMLサイトマップから画像を除外するには、このオプションを有効にします。また、GoogleのAPIフィルタフックを使用して、All in One SEO Packから画像を除外することもできます。

注:この機能は、無料のプラグインのバージョン2.4とオールインワンSEO Pack Proのバージョン2.5で追加されました。

 

  • 圧縮版サイトマップを構築する

チェックしてください。

サイトマップを圧縮して作成します。圧縮しているとサーバーの負荷も減りますので、チェックしておくことを推奨します。

【公式解説文の翻訳】
このオプションは.GZip圧縮を使用してサイトマップを作成します。この設定はデフォルトでオンになっているため、圧縮されたファイルが送信され、検索用ロボットが通常のサイトマップを取得できない場合に使用できます。主要な検索エンジンはすべてあなたのサイトマップにこのフォーマットを受け入れます。

 

  • 仮想 Robots.txt からリンクする

チェックしてください。

【公式解説文の翻訳】
この設定では、WordPressによって自動的に作成される動的なRobots.txtファイルにサイトマップリンクが追加されます。これにより、作成した静的なRobots.txtファイルへのリンクは追加されません。

 

  • サイトマップを動的に生成

チェックしてください。

サイトマップがリアルタイムに生成されるようになります。常に最新の情報が掲載されるようになりますので、チェックしておきましょう。

【公式解説文の翻訳】
この設定を有効にすると、検索ロボットが要求するたびにサイトマップが動的に生成され、静的なファイルが作成されるのではなく、古いファイル、古いファイル、破損したファイル、上書きされることがあります。 1つのSEO Packで生成されるサイトマップは、サイトの最新バージョンで常に最新のものです。この設定をチェックしている場合は、手動でサイトマップを更新する必要はありません。

 

追加ページ


WordPress で作成したページはすべてサイトマップに含めることができますが、もしそれ以外のページもサイトマップに含めたい場合は、こちらで URL を入力して設定してください。

例えば自分で HTML を作成してページをアップロードした場合、ここで設定することで、そのページもサイトマップに含めることができます。

【公式解説文の翻訳】
このセクションを使用して、WordPressのインストールに含まれていないURLをサイトマップに追加することができます。

 

除外項目


サイトマップに掲載したくないカテゴリーやページがある場合は、ここで設定しましょう。記事のスラッグ(この記事のスラッグは all-in-one-seo-pack-xml-sitemap)やページ ID を入力してください。

WordPress ページID・記事ID・pidの取得方法

【公式解説文の翻訳】
[除外アイテム]セクションでは、特定のカテゴリやページをサイトマップから除外できます。検索エンジンでクロールしたくないアイテムは除外できます。

ページ、投稿、またはカスタム投稿タイプを除外するには、各アイテムのスラッグまたはIDをコンマで区切って入力します。たとえば、「store,cart,checkout」は、これらの3つのページをサイトマップから除外します。

覚えておいてください:あなたのサイトマップにコンテンツを含めていないからといって、Googleがそれを見つけてインデックスに登録するわけではありません。サイトのコンテンツにリンクすると、検索エンジンはそれらのリンクをたどってクロールしますので、NOINDEXの設定を使用して、All In One SEO Packを使用してどのコンテンツがインデックスに登録されるかを制御します。

 

優先順位


すべて上書きしないを選んでください。

サイトマップには各ページごとに、ブログ内の優先順位を設定する項目があります。サイトマップを動的に生成する場合は、自動で優先順位が設定されますので、この項目を変更する必要はありません。

【公式解説文の翻訳】
オールインワンSEOパックの[XMLサイトマップ]ページの上部にある[サイトマップを表示]リンクをクリックすると、各URLの現在の値とともにサイトマップの[優先度]列と[変更頻度]列が表示されます。

これらの設定の両方の値は、URLの最終更新日に基づいて生成されます。したがって、昨日変更されたものは毎日の頻度値を持ち、Priority値は残りのサイトに応じて約0.9(90%)になる可能性が最も高いです。オールインワンSEOパックのこれらのデフォルト設定はすべて上書きしないでください。サイトマップを動的に生成する設定を選択した場合は、サイトマップの変更に応じて優先度と頻度が更新されます。

 

頻度


すべて上書きしないを選んでください。

優先順位と同じような設定なのですが、サイトマップには各ページごとに、更新頻度を設定する項目があります。サイトマップを動的に生成する場合は、自動で更新頻度が設定されますので、この項目を変更する必要はありません。

 

サイトマップを確認する


すべて設定し終わったら、ページ下部にあるサイトマップを更新ボタンを押してください。これでサイトマップが生成されます。

ページ上部のサイトマップのステータス部分にある、サイトマップを表示リンクをクリック(タップ)して、サイトマップを確認してみてください。

そこで表示されたサイトマップの URL を Google と Bing のウェブマスターツールに登録すると完了です。

 

最後に


検索サイトのクローラーは、サイトマップがなくてもブログ内のページを取得しにきてくれますが、確実にページを拾ってくれるわけではありません。サイトマップがあると、掲載したいページをこちらから検索サイトに伝えることが出来ますので、クローラーの正確性が大きく高まります。

頑張って記事を書いても検索サイトに掲載されないと大きなアクセスは見込めません。All in One SEO Pack をインストールしたら、一緒に XML サイトマップの設定も行っておきましょう!

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

WordPress - All in One SEO Packの設定を徹底解説

ブログの記事は検索サイトでできるだけ上位に表示させたいですよね。そのために必要なのが SEO:Search Engine Optimization(サーチ・エンジン・オプティマイゼーション)です。日本語に直すと検索エンジン最適化になります。

WordPress の初期状態では SEO が十分に行われているとは言えません。そこで利用してもらいたいのが、All in One SEO Pack というプラグインです。

すでに100万以上の WordPress にインストールされており、実績も十分です。All in One SEO Pack はとても高機能なのですが、その分、設定項目も多く、各項目の理解が非常に難しくなっています。プラグイン自体は日本語化されているのですが、公式サイトの解説が英語になっているため、各設定がなにを意味しているのかわかりにくいのです。

そこでこの記事では、All in One SEO Pack の設定を翻訳し、使い方についてもできるだけわかりやすく解説していきます。

All in One SEO Pack をインストールする


ダッシュボード > プラグイン > 新規追加 で All in One SEO Pack を検索してインストール&有効化しましょう。

プラグインのインストール方法について知りたい方は、こちらのページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

一般設定を行う


インストールが終わったら All in One SEO Pack の設定を行いましょう。いろいろな設定項目があるのですが、まずは一般設定について解説します。

 

1. 一般設定ページに移動する

ダッシュボード > All in One SEO > 一般設定 を選んで、設定ページに移動してください。

 

2. 設定を行う

画像赤矢印の部分で一般設定を行います。各項目の推奨設定と解説(翻訳)を掲載していますので、それを参考にしながら設定してください。

一般設定


  • Canonical URL

チェックしてください。

Canonical URL とは、内容が重複しているのに URL が違うページなどで、重要な方のページを検索サイトに伝えることができる機能です。チェックするとこのようなタグが追加されます。

<link rel="canonical" href="https://example.com/blog/" />

【公式解説文の翻訳】
この設定はデフォルトでオンになっています。これは、Canonical URLsの設定が重複コンテンツに対してGoogleによって処罰されたり、複数のURLが同じコンテンツにつながったりするのを防ぐためです。 Googleではウェブマスターセントラルブログに、Googlebotが重複コンテンツのインデックスを作成する際に直面する問題とその回避方法の詳細を掲載した記事を掲載しています。このチェックボックスをオンにすると、Googleのルールに従うのに役立ちます。

詳細については、Googleのこの記事を参照してください。

 

  • ページネイションをCanonical URLsにしない

チェックを外してください。

通常、トップページには以下のCanonical タグが追加されます。

<link rel="canonical" href="https://example.com/blog/" />

そして 2ページ目には以下のタグが追加されます。

<link rel="canonical" href="https://example.com/blog/page/2/" />

チェックすると 2ページ目以降の Canonical タグをトップページのタグに統一します。つまり 2ページ目以降は、トップページの重複ページという扱いになります。

【公式解説文の翻訳】
このオプションは、Canonical URLからページネーションを削除したいユーザーのために追加されました。通常、ページングされたページまたは投稿の標準URLはhttp://mydomain.com/page/2/に表示されます。このオプションは、Canonical URLから/ page / 2 /を削除します。

 

  • カスタム Canonical URL を有効化

チェックを外してください。

記事ごとに自分で Canonical URL を設定したい方はチェックしてください。

【公式解説文の翻訳】
このオプションをオンにすると、このオプションは、[投稿/編集ページの編集]画面の[オールインワンSEOパック]ボックスに新しいフィールドを追加し、その投稿/ページのカスタム正規URLを設定できます。

 

  • 元のタイトルを利用

無効を選んでください。

【公式解説文の翻訳】
この設定はデフォルトでは無効になっています。サイトのテーマや他のアクティブなプラグインが、あなたのサイトにタイトルタグを書き込むオールインワンSEOパックに干渉している場合は、この機能を有効にする必要があります。

 

  • Schema.org マークアップを使用

チェックしてください。

Schema.org という構造化マークアップのルールに従って検索サイトに情報を伝えます。

【公式解説文の翻訳】
このオプションは、All in One SEO Packが自分のサイトにSchema.orgマークアップを出力しないようにするために追加されました。このマークアップは検索エンジンに情報を提供してリッチスニペットを表示できるため、Schema.orgマークアップのプラグイン全体で徐々にサポートを追加しています。ただし、W3C HTML検証ツールはこの新しいマークアップをサポートしておらず、サイトでこのマークアップを見るとエラーを返します。これらのエラーは無視しても問題ありません。サイトやSEO、検索エンジンのランキングには影響しません。ただし、W3C Validatorを通過し、リッチスニペットを検索結果で犠牲にしたくないクリーンなHTMLマークアップを好む人にとって、このオプションはAll in One SEO PackによるSchema.orgのマークアップ出力を削除します。このオプションは、SEOの目的でSchema.orgマークアップが有効であるため、デフォルトでオンになっています。

リッチスニペットについて詳しくは、Googleのサイト(https://support.google.com/webmasters/answer/99170?hl=ja)をご覧ください。

 

  • ログの重要なイベント

チェックを外してください。

【公式解説文の翻訳】
[重要なイベントを記録する]オプションは、All in One SEO Packプラグイン内で発生するイベントのログファイルを生成します。これは主にデバッグとレポート作成に使用され、プレミアムサポートフォーラムのサポートチームがチェックするように指示されない限り、安全にチェックを外すことができます。

 

ホームページ設定


  • ホームタイトル

ブログのタイトルを入力してください。

【公式解説文の翻訳】
ホームタイトルは、サイトのホームページのSEOメタタイトルです。ホームページのメタタイトルはブラウザの上部に表示され、ホームページのソースに<title>タグの間に表示されます。これは検索エンジンで検索結果にあなたのサイトへのリンクとして表示されるタイトルなので、これをシンプル(60文字以下)にしておくことが重要です。このフィールドに入力したものは、ホームページのソースコードに直接出力されます。あなたのホームページに最新のブログ記事を表示しているのか、静的なホームページ(メインのWordPressメニューの[設定]、[読書]で管理されている)を持っているかに関係なく使用されます。

 

  • ホームディスクリプション

ブログの説明文を入力してください。

どういったブログなのか簡潔に説明しましょう。ここで入力した説明文はこのタグで表示されます。

<meta name="description" content="○○" />

【公式解説文の翻訳】
[ホームの説明]は、サイトのホームページのメタ説明です。これは検索エンジンが検索結果に表示する説明であり、検索結果のタイトルの下に表示されます。説明は230〜320文字にしておき、関連性があることを確認してください(実際の文章で、狂ったキーワードの組み合わせではありません)。メタ記述は提案です.Googleなどの検索エンジンによっては、自分のコンテンツの記述を作成し、メタ記述の代わりに検索結果に表示することがあります。詳細については、Meta Descriptionsのドキュメントを参照してください。 このフィールドに入力したものは、ホームページのソースコードに直接出力されます。あなたのホームページに最新のブログ記事を表示しているのか、静的なホームページ(メインのWordPressメニューの[設定]、[読書]で管理されている)を持っているかに関係なく使用されます。 下のスクリーンショットでは、All in One SEO Pack設定で入力した内容に基づいて、Googleの検索結果にGoogleのサイトのホームタイトルとホームの説明が表示されている様子を確認できます。

 

  • 代わりに固定フロントページを利用する

無効を選んでください。

【公式解説文の翻訳】
SEO Title、Description、Keywordsを設定する場合、All in One SEO Packは常にサイトのホームページを異なる方法で扱いました。これは、WordPressサイトを静的なフロントページまたは最新の投稿を表示する動的ページ(http://codex.wordpress.org/Settings_Reading_Screen)で設定できるためです。ホームページに最新の投稿を表示するようにサイトを設定している場合は、SEOのタイトル、説明、キーワードを設定するために編集できるページはありません。したがって、私たちはいつもあなたのホームページにSEOのタイトル、説明、キーワードを設定している、オールインワンSEOパックに別々のホームページ設定セクションを持っています。

静的なフロントページを代わりに使用するこの新しいオプションでは、静的なホームページからホームページのSEOを制御できるようになりました。これは、設定、WordPressで読むの下に静的なホームページが設定されている場合にのみ機能します。

このオプションを有効にすると、[ホームタイトル]フィールド、[ホームの説明]フィールド、および[ホームキーワード]フィールドが非表示になります。静的なホームページを編集して、そのページのAll in One SEO Packボックスを使用してSEOを制御できます(http://semperplugins.com/documentation/page-settings/)。

 

タイトル設定


  • タイトルを書き換える

無効を選択してください。

各ページのタイトルを書き換えたい場合は、有効を選んでタイトルを設定してください。

【公式解説文の翻訳】
これは、ブラウザタブと<title>タグの間にページのソースに表示されるタイトルタグを参照します。これはデフォルトで有効になっており、下の[書式]フィールドに表示される書式がどのように表示されるかを制御します。

カスタム投稿タイプ設定


  • カスタム投稿用のSEO

有効を選択してください。

【公式解説文の翻訳】
これのデフォルト設定はEnabledです。これは、All in One SEO Packがテーマやアクティブなプラグインによって作成されるカスタム投稿タイプに対して機能するように設定されています。サイト内のカスタム投稿タイプで All in SEO Pack Proを使用しない場合は、[無効]を選択し、画面の上部または下部にある[更新オプション]ボタンをクリックします。

 

  • SEO を行う投稿タイプ

投稿と固定ページをチェックしてください。

記事の投稿ページと固定ページの投稿ページに All in One SEO Pack メイン設定の欄が表示され、細かい設定を行うことができるようになります。

検索サイトでの表示サンプルが見れたりしますので、チェックしておきましょう。

【公式解説文の翻訳】
ここでは、各投稿タイプの横にあるチェックボックスをオンまたはオフにすることで、All In One SEO Packで動作させるカスタム投稿タイプを選択できます。デフォルトでは、標準のWordPress投稿タイプのみがチェックされます。

 

  • 詳細設定を有効化

無効を選択してください。

【公式解説文の翻訳】
詳細オプションを有効にすると、カスタム投稿タイプおよびカスタム分類のタイトルフォーマットを制御するための高度なオプションが表示されます。

 

表示設定


  • カスタム投稿タイプの列ラベルを表示

投稿と固定ページをチェックしてください。

ダッシュボードの投稿一覧、固定ページ一覧に、SEO タイトル・SEO ディスクリプションの欄が表示され、そこから編集できるようになります。

各記事の投稿ページでも同じ項目を編集できるため、絶対に必要というわけではありません。一覧で編集をしない方はチェックを外しておきましょう。

【公式解説文の翻訳】
これは、どの画面にSEOタイトル、SEOキーワード、およびSEO記述列を表示するかを制御します。これらの列には、SEOタイトル、メタ記述、およびメタキーワードを追加したコンテンツの概要が表示されます。投稿/ページテーブル設定のドキュメントを参照してください。 オールインワンSEOパックの列を含むページ画面 デフォルトでは、[投稿とページ]ボックスのみがチェックされていますが、他の投稿タイプを選択することもできます。これらのカラムはテーブルに追加されます。カスタム投稿タイプを作成するときに、より多くのチェックボックスがここに表示されます。

 

ウェブマスター認証


検索サイトの Google と Bing のウェブマスター認証を行っておくと、自分のブログにどんな検索ワードで人が訪れたかを、細かく把握することができるようになります。

どの記事に人気があって、どれだけ検索されているかを把握することは、サイトを分析する上で欠かせない行動なので、ぜひ設定しておきましょう。

 

  • Google ウェブマスターツール

以下のサイトにアクセスしてから自分のブログを登録しましょう。ブログを登録したら所有者を確認する必要が出てきますので、そこで All in One SEO Pack のウェブマスター認証機能を利用します。

Google Search Console(旧名:Google ウェブマスターツール)

 

所有者確認ページで HTML タグを選択するとタグが表示されます。画像赤線部分の文字をコピーして Google ウェブマスターツールのフォームに貼り付けましょう。

Google Search Console の認証方法は複数ありますので、他の方法ですでに認証されている方は、ここで設定する必要はありません。

 

  • Bing Web マスターセンター

Google と同じく、Microsoft が運営している検索サイトの Bing にも、ウェブマスターツールがあります。Bing でもブログを登録して、所有権の確認を行いましょう。

Bing web マスターツール

ブログ登録後、所有権の確認ページに移動します。ここで画像赤線の文字列をコピーして、Bing Web マスターセンターのフォームに貼り付けましょう。これで Bing のサイト所有権の確認が行えるようになります。

Bing も認証方法は複数ありますので、他の方法ですでに認証されている方は、ここで設定する必要はありません。

 

  • Pinterest のサイト検証

Pinterest のウェブサイト確認をすることもできます。以下の機能があるようです。

ウェブサイトを確認すると、あなたのウェブサイトから保存された全てのピンに、あなたのプロフィール画像が表示されます。また、他のユーザーがあなたのウェブサイトからどのコンテンツを保存しているのかを把握することもできます。

公式サイトより

Pinterest にログインすると設定メニューにサイトのドメインを確認するという項目がありますので、そちらにブログのアドレスを入力して、画像のページを表示してください。これはドメインの所有者しか行えません。

画像赤線の文字列をコピーして、Pinterest のサイト検証のフォームに貼り付けてください。

 

Google 設定


Google+ のアカウントをブログの著者として登録するか、または Google アナリティクスをブログで使う場合の設定を行います。SEO 的には大きな効果を及ぼさない項目ですので、Google アナリティクス用の最低限の推奨設定のみ載せておきます。

その他の項目は翻訳を掲載しておきますので、各自で考えて行ってみてください。

 

  • Google+ デフォルトプロフィール

【公式解説文の翻訳】
Googleは最近、検索結果に著者情報を表示して、ユーザーが優れたコンテンツを見つけられるよう支援しました。 2014年8月に、Googleは検索結果に著者の支持を下しました。ただし、Googleの著者やサイト運営者のマークアップをサイトに含めると、他にもメリットがあります。

オールインワンSEO Packを使用すると、Google+プロフィールのURLを入力することで、あなたのサイトの著者マークアップとしてGoogle+プロフィールを追加できます。この情報を設定できる場所は次の2つです。

Googleプラスのデフォルトのプロフィール欄には、サイトのオーナー向けにGoogle+プロフィールを入力できます。これは、コンテンツ作成者ごとにGoogle+プロフィールを指定しない限り、すべてのコンテンツのデフォルトの作成者プロフィールとしてユーザーになります。

オールインワンSEO Packは、WordPressのユーザーの下にある[ユーザーの編集]画面にGoogle+のフィールドを追加します。ここに入力するGoogle+プロフィールは、このユーザーが作成した投稿やページで使用されます。これにより、[一般設定]画面の[Google設定]ボックスに入力されたデフォルトのGoogle+プロフィールが上書きされます。

 

  • Google+ プロフィールを無効化

【公式解説文の翻訳】
[ユーザーの編集]画面にGoogle+のフィールドが表示されないようにするには、[Googleプラスプロフィールを無効にする]チェックボックスをオンにして無効にすることができます。たとえば、メンバーシップサイトを持っていて、メンバーに自分のユーザープロフィールのGoogle+フィールドが表示されないようにするには、このオプションを使用してメンバーを無効にします。 Googleでサイトの所有権を確認する方法の詳細については、こちらの記事をお読みください。

 

  • サイトリンク検索ボックスを表示

【公式解説文の翻訳】
このオプションは、Googleが検索結果に表示するサイトリンク検索ボックスに必要なコードを出力します。サイトリンク検索ボックスについて詳しくは、Googleのウェブサイトをご覧ください。

Googleでは、さまざまな要因を使用して、サイトに関する情報やGoogle検索ユーザーからのさまざまな種類のクエリなど、サイトリンク検索ボックスの表示タイミングを判断します。

 

  • 優先サイト名を設定

【公式解説文の翻訳】
このチェックボックスをオンにすると、GoogleがGoogleナレッジグラフの一部として使用するサイト名を設定できるフィールドが表示されます。これは、WordPressの[設定]、[一般]の[サイトタイトル]に設定されています。

 

  • 高度な作成者情報オプション

【公式解説文の翻訳】
Enabledを選択すると、All in One SEO Pack内のAdvanced Authorship Optionsが有効になります。

 

  • GoogleアナリティクスID

Google アナリティクス(アクセス解析)を利用している方は、ここで ID を登録しましょう。

そうすることで、アクセス解析のコードがブログのソース内に掲載されるようになります。

UA-#########-#

Google アナリティクスのウェブサイトから、上記の ID をコピーして貼り付けましょう。これ以下の設定はすべて Google アナリティクス関連の項目になります。利用しない方は読み飛ばしてください。

 

  • 高度な分析オプション

有効を選んでください。

アナリティクスを利用しない方は設定するフォームが表示されません。

 

  • ドメインのトラッキング

わからない方はチェックしないでください。

【公式解説文の翻訳】
トラッキングドメインオプションは、GoogleアナリティクストラッキングコードのCookieドメインを設定する場合に使用します。デフォルトでは、Cookieドメインは自動に設定されますが、Googleが受け入れるパラメータはすべて入力できます。詳細については、こちらのドメインとCookieに関するGoogleアナリティクスのドキュメントを参照してください。

 

  • 複数のドメインを追跡する

わからない方はチェックしないでください。

【公式解説文の翻訳】
Googleアナリティクスでドメイン間のトラッキングを有効にする場合は、[複数のドメインとその他のドメインを追跡]オプションを使用します。詳細については、ここでのクロスドメイントラッキングに関するGoogleアナリティクスのドキュメントを参照してください。

 

  • IPアドレスを匿名化

わからない方はチェックしないでください。

【公式解説文の翻訳】
Anonymize IP Addressesオプションは、サイト訪問者の完全なIPアドレスを追跡して保存しないようGoogleに指示します。 Googleアナリティクスは、保存前にIPアドレスの最後のオクテットを削除してIPアドレス情報を匿名化します。この機能は、サイト所有者が完全なIPアドレス情報の格納を妨げるプライバシーポリシーまたはデータ保護ルールに準拠するように設計されています。これにより、地理的な報告の精度がわずかに低下することに注意してください。詳細については、Googleのウェブサイトをご覧ください。

 

  • 広告主のトラッキングを表示

わからない方はチェックしないでください。

【公式解説文の翻訳】
Googleアナリティクスのディスプレイ広告主機能は、DoubleClickのCookieを利用する機能のコレクションで、次のようなことが可能です。 特定の行動、ユーザー属性、関心データに基づいてリマーケティングユーザーを作成し、それらのリストをAdWordsと共有する アナリティクスレポートでユーザー属性データとインタレストデータを使用する 人口統計データと関心データに基づいてセグメントを作成する 詳細については、Googleのウェブサイトをご覧ください。

 

  • トラッキングからユーザーを除外

Administrator をチェックしましょう。

これは管理者(あなた)のアクセスを、アクセス解析から除外する設定です。ブログ関係者のアクセスが解析に入ると、正確なアクセス数のカウントができなくなるので、解析上不必要なユーザーはここでチェックしておいてください。

【公式解説文の翻訳】
サイトにログインしたときに自分やユーザーが生成したデータを除外するには、この設定を使用します。 Googleは、ログインしてサイトを自分で操作した場合でも、サイトのページや投稿へのリンクがクリックされると、いつでもそのリンクを追跡します。この設定では、Analyticsのトラッキングデータがスキューされないように削除されます。

 

  • 外部へのリンクを追跡

わからない方はチェックしないでください。

【公式解説文の翻訳】
[送信リンクの追跡]オプションは、サイトから離れたリンク(たとえば、自分のFacebookページや自分が所有する別のWebサイトへのリンクなど)を追跡する場合に使用します。デフォルトでは、Google Analyticsはこれらのリンクを無視し、リンクをクリックしたユーザーは追跡しません。詳細はこちらのドキュメントを参照してください。アウトバウンドリンクを追跡するには、このチェックボックスをオンにすると、オールインワンSEO Packがウェブサイトのソースに必要なコードを追加します。

 

  • 拡張リンク属性

わからない方はチェックしないでください。

【公式解説文の翻訳】
拡張リンクアトリビューションを使用すると、ページにタグを付けて、次のような強化されたリンク追跡機能を実装できます。 すべて同じ宛先を持つページ上の複数のリンクについては、個別の情報を参照してください。たとえば、同じページに2つのリンクがあり、両方が[お問い合わせ]ページにつながる場合は、リンクごとに個別のクリック情報が表示されます。 1つのページ要素に複数の送り先がいつあるかを参照してください。たとえば、ページの[検索]ボタンをクリックすると、複数の宛先が表示される可能性があります。 ボタン、メニュー、およびjavascriptによるアクションを追跡します。 このオプションをオンにすると、ここでの手順に従って、プロパティ設定で拡張リンクの属性を有効にする必要があります。詳細については、Googleのウェブサイトをご覧ください。

 

  • 拡張eコマース

わからない方はチェックしないでください。

【公式解説文の翻訳】
この機能を使用すると、拡張eコマースで、お客様のeコマースサイトでの購入経路をトラッキングすることができます。詳細については、Googleのウェブサイトをご覧ください。

 

Noindex 設定


検索サイトはロボットにクロール(アクセス)させて、ウェブサイトの情報を取得し、検索サイトの結果を構成しています。そのロボットに伝える情報をここで設定します。

検索サイトは重複した内容のページを高く評価しない傾向があります。

カテゴリーや日付のアーカイブページは記事がまとまっているので、読者は記事をまとめて読むことが出来ますが、検索サイトからは個別の記事ページと内容が重複したページだと認識されてしまう可能性があります。

ここをどう設定するかというところが悩みどころになります。

この項目の設定は重要なのですが、さまざまなブログに共通して推奨できる設定はありません。運営者の方がそれぞれのブログに合った適切な設定を考えてください。

 

  • NOINDEX をデフォルト

noindex というのは、以下のタグを追加することで検索サイトに掲載されないページを設定することができます。

<meta name="robots" content="noindex">

検索サイトに載せなくていいページがある場合はチェックしてください。そのページに上記のタグが追加されます。基本的にはチェックする必要はないと思います。

 

  • NOFOLLOW をデフォルト

nofollow というのは、以下のタグを追加することで、検索サイトのロボットにこのページのリンクはたどらなくてもいいと伝えることができます。ここで行き止まりですと指定しておくと、効率的にロボットがアクセスしてくれるようになります。

<meta name="robots" content="nofollow">

チェックすると、そのページに上記のタグが追加されます。基本的にはチェックする必要はないと思います。

 

  • カテゴリーをnoindexにする

チェックすると、カテゴリーのアーカイブページを検索サイトに表示しないようにします。

例)カテゴリーのアーカイブページ

https://gameusers.org/dev/blog/category/blog/wordpress-plugins/

 

  • 日付別アーカイブに noindex を使用

チェックすると、日付別のアーカイブページを検索サイトに表示しないようにします。

例)日付別のアーカイブページ

https://gameusers.org/dev/blog/2018/01/

 

  • 投稿者アーカイブに noindex を適用

チェックすると、投稿者のアーカイブページを検索サイトに表示しないようにします。

例)投稿者のアーカイブページ

https://gameusers.org/dev/blog/author/az1979/

 

  • タグをnoindexにする

チェックすると、タグのアーカイブページを検索サイトに表示しないようにします。

例)タグのアーカイブページ

https://gameusers.org/dev/blog/tag/share-buttons/

 

  • 検索ページに noindex を使用

チェックすると、検索ページを検索サイトに表示しないようにします。ブログ内を検索ボックスで検索した結果です。

例)検索ページ

https://gameusers.org/dev/blog/?s=WordPress

 

  • 404 ページに noindex を使用

チェックすると、404ページを検索サイトに表示しないようにします。ページが見つからなかった場合に表示されるページが 404ページです。

例)404 ページ

https://gameusers.org/dev/blog/404

 

  • ページ付けされたページ/投稿に noindex を使用

チェックすると、ページ付けされたページ/投稿を検索サイトに表示しないようにします。ブログトップやアーカイブページの2ページ目・3ページ目のことです。

例)ページ付けされたページ/投稿

https://gameusers.org/dev/blog/page/2/

 

  • ページ付けされたページ/投稿に nofollow を使用

チェックすると、ページ付けされたページ/投稿のリンクをロボットにたどらないように指示します。

例)ページ付けされたページ/投稿

https://gameusers.org/dev/blog/page/2/

 

詳細設定


主に検索サイトで表示される記事の説明文などを設定します。

 

  • ディスクリプションを自動生成

チェックしてください。

この項目をチェックしておくと、検索サイトで表示される記事の説明文が自動で生成されます。記事ごとに自分で設定したい方は、チェックを外しておいてください。

チェックの有無に関わらず、記事の投稿ページで編集できます。

【公式解説文の翻訳】
[自動生成の説明]設定では、投稿の抜粋、投稿の抜粋がない場合は投稿コンテンツの最初の320文字を使用して、任意の投稿タイプのメタ説明を自動的に生成します。

デフォルトでは、WordPressは投稿内容の最初の55語から抜粋を自動的に生成します。または、「投稿の編集」画面の「抜粋」フィールドに簡単に書き込むこともできます。オールインワンSEOパックは自動生成されたメタ記述のあなたの投稿の抜粋を使用します。抜粋がない場合は、投稿内容の最初の320文字が使用されます。これは、コンテンツがたくさんあり、すべてのページ/投稿にメタ説明を入力したくない場合に特に便利です。投稿またはページを編集して、自動生成されたメタ記述を上書きすることができます。

重要な注意:検索エンジンは、サイトの各ページや投稿のメタ説明を書くことを推奨し、好む。彼らはあなたのコンテンツからあなたのために自動的に生成されたメタ記述にこれを好む。これは良いオンサイトSEOの重要な部分です。追加情報については、Meta Descriptionのドキュメントを参照してください。

 

  • 自動生成説明文に本文を使用

チェックを外してください。

【公式解説文の翻訳】
デフォルトでは、All in One SEO Packは、自動生成されたメタ記述として投稿からの抜粋を使用し、抜粋が存在しない場合は、コンテンツを使用するようになります。この動作を変更したいユーザーもいます。この設定では、自動生成されたメタ記述のポストコンテンツが常に使用され、ポスト抜粋は無視されます。

WooCommerceユーザーは、この設定が追加され、自動生成されたメタ記述がProduct Short Descriptionではなく製品コンテンツから生成されることに注意してください。メタ説明にProduct Short Descriptionを使用しない場合は、この設定を有効にします。

 

  • 自動生成された説明でショートコードを実行

チェックを外してください。

【公式解説文の翻訳】
この設定では、メタ記述を自動生成する前に、投稿コンテンツに含まれるショートコードが確実に実行されます。一部のページ作成者がショートコードの中にコンテンツをラップするため、このオプションが追加されました。この設定は、メタ記述が自動生成される前にこれらのショートコードが実行されるため、メタ記述がサイトに表示されているコンテンツとより密接に似ていることを意味します。

 

  • ページ区切り付きページの説明を削除

チェックを外してください。

チェックすると2ページ目以降にディスクリプションが表示されなくなります。これによりサイト内でディスクリプションが重複することを防げますが、SEO 的に大きなデメリットではないためチェックする必要はありません。

2ページ目以降のページを重要視しない設定にされている方はチェックしておくといいでしょう。

【公式解説文の翻訳】
ページが設定されたページの説明を削除するオプションは、Googleウェブマスターツールで重複したメタ説明の警告が表示されないようにするためのオプションです。これは主要なペナルティの原因ではないため、デフォルトではチェックされていません。このボックスをオンにすると、ページ記述されたコンテンツの最初のページにのみMeta Descriptionが表示され、その後に続くすべてのコンテンツページからメタ記述が削除されます。 WordPress.comでこのページの内容を改ページしてください。

 

  • 長いディスクリプションを短縮しない

チェックを外してください。

ページの説明文が長すぎるのはよくありません。適当な長さにする必要がありますので、チェックを外しておくことを推奨します。

【公式解説文の翻訳】
デフォルトでは、All in One SEO PackはMeta Descriptionsを320文字に切り詰めます。つまり、1つのSEO PackでオールインのSEO記述フィールドに入力したテキストはすべて短縮されます。オールインワンSEOパックにあなたの説明を切り捨てずにそのまま出力したい場合、このボックスにチェックを入れてください。

 

  • 投稿メタフィールドの保護を解除

チェックを外してください。

【公式解説文の翻訳】
フィールド名の前にアンダースコア(_)を使用してカスタムフィールドを内部フィールドとして作成した場合、このオプションを使用すると、[編集後のページの編集]画面の[カスタムフィールド]ボックスのユーザーと、 WordPressモバイルアプリケーションなどのXMLRPCを使用するものすべてに適用されます。これにより、フィールドがプライベートからパブリックに効果的に変更されます。

 

  • 投親投稿への添付ファイルをリダイレクトします

チェックを外してください。

【公式解説文の翻訳】
この設定は、メディア添付ファイルのURLを親の投稿にリダイレクトします。画像を投稿/ページに埋め込み、添付ファイルページにリンクすると、訪問者が画像をクリックすると親の投稿にリダイレクトされます。

 

  • 固定ページを除外する

空欄にしてください。

【公式解説文の翻訳】
このフィールドにポスト名またはページ名のコンマ区切りリストを入力すると、All in One SEO Packはそのページまたは投稿のメタ情報を何も出力しません。 1つのSEO PackのオールインワンボックスはPost / Page編集画面に表示されますが、入力した内容はそのページまたは投稿のソースコードには出力されません。 All in One SEO Pack Proを使用してXMLサイトマップを生成している場合、ページまたは投稿はXMLサイトマップに表示されます。

 

  • 投稿のヘッダーに追加記入

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、すべての投稿のHEADに出力されます。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、All in One SEO Packに追加の投稿ヘッダーを追加することもできます。

 

  • 固定ページのヘッダーに追加記入

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、すべてのページのHEADに出力されます。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、All in One SEO Packにページヘッダーを追加します。

 

  • フロントページのヘッダー追加

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、サイトの先頭ページのHEADに出力されます。フロントページは、設定、閲覧、または最新の投稿を表示するように設定している場合はホームページの静的ページとして設定したページです。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、フロントページヘッダーをAll in One SEO Packに追加できます。

 

  • 追加ブログページヘッダー

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、サイトのブログページのHEADに出力されます。ブログページは、設定、読書、または最新の投稿を表示するように設定している場合はホームページに静的ページとして設定したページです。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、ブログページヘッダーをAll in One SEO Packに追加することもできます。

 

キーワード設定


記事ごとのキーワードを設定します。現在は SEO 的にキーワードは有効ではなくなっているようですので設定する必要はありません。

無効を選択してください。

 

最後に


非常に長くなりましたが、これで一般設定の解説は終わりです。ページ最下部で設定を更新ボタンを押してもらうと、ブログに設定が反映されます。

これで検索サイトからの評価も高まるはずです。後は頑張って価値のある記事を書いていきましょう!

All in One SEO Pack はまだまだ機能があり、サイトマップを生成する機能や、ソーシャルメディアの設定なども用意されています。そちらの機能についても解説していますので、関連リンクをチェックしてみてください。

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPressの画像をモーダルウィンドウで表示しよう!

WordPress 画像をモーダルウィンドウで開く

WordPress の記事に追加した画像をクリック(タップ)すると、ブラウザに画像が読み込まれて大きく表示されますよね?

その際、画像をクリックする → ブラウザに画像が読み込まれる → 元のページに戻るという経緯をたどりますが、元のページに戻った時に、再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。

パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが、スマートフォンからアクセスしたときに、再度ページを読み込むと、時間がかかるので読者にストレスを与えることになってしまいます。

そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。

モーダルウィンドウってなに?


触ってもらうとわかりやすいと思います。以下の画像をクリック(タップ)してみてください。

黒い背景になって中央に画像が表示されましたね。これがモーダルウィンドウです。モーダルウィンドウを使って画像を表示するメリットは、ブラウザの URL が変わらず、同じページ内に画像を拡大して表示するので、ブラウザの戻るボタンを押す必要がなく、ページの再読み込みも発生しないことです。

ブログ記事の画像をすべてモーダルウィンドウで表示すると、拡大したい画像だけを読み込んでページ内に表示できるようになるので、とても快適になります。

この記事では、画像をモーダルウィンドウで表示する方法を解説しています。これまでに投稿した記事のタグを変更することなく、モーダルウィンドウで表示できるようになりますので、興味のある方はぜひ試してみてください。

HTML と JavaScript を追加できる環境を作る


まずは HTML と JavaScript を追加できる環境を作ります。このブログでは Simple Custom CSS and JS というプラグインの利用を推奨しています。HTML や JavaScript の知識のない方でも、コピペするだけで簡単にできるように解説していますので、怖がらずにチャレンジしてみてください。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

HTML を追加する


モーダルウィンドウは jQuery( WordPress でも使われている JavaScript のライブラリ ) の Magnific Popup というプラグインを利用して実装します。HTML のタグを利用してプラグインを読み込みましょう。

ちょっと難しい単語が出てきていますが、わからない方は気にせず解説にそってコピペするだけで OK です。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML を選んでください。

 

2. HTML のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup CDN と入力して、その下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでブログにプラグインの読み込みが行われます。

JavaScript を追加する


さきほどの設定で読み込まれるようになったプラグインを動作させるために、JavaScript を追加する必要があります。

 

1. JavaScript を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom JS を選んでください。

 

2. JavaScript のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup JS と入力して、その下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでモーダルウィンドウの設定は完了です。

画像をチェックする


ブログの記事の画像をクリック(タップ)して、モーダルウィンドウが正常に表示されるかチェックしてみてください。

こんな感じに表示されると成功です。

対応画像を増やす


デフォルトでは記事内の GIF・PNG・JPEG 画像がモーダルウィンドウに表示されます。その他の画像もモーダルウィンドウに表示したい場合は、JavaScript のコードを編集して、以下の設定を追記してください。

jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"]')
     ↓↓↓
jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".svg"],a[href$=".svgz"]')

上記では拡張子が .svg と .svgz の画像を追加しました。他にもモーダルウィンドウで表示したい画像の種類がある場合は、赤文字のように、,a[href$=”.ファイルの拡張子”] を追加することで表示されるようになります。

最後に


画像をモーダルウィンドウで表示するようにすると、ブログの使い勝手がすごく良くなります。無駄な読み込みも減らせますので、より快適に記事を読んで貰えるようになります。

ぜひこの記事を参考に設定してみてください。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別・新着記事

検索サイトからのユーザーが目的の記事を読んだ後、他の記事も読んでくれたら嬉しいですよね。そういう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。

ですが、ここで自分のブログについて考えてみてください。検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか?テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。ただ雑多な内容になってしまっているブログの場合は、アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。

実はこのブログもそうなんです。Game Users というサイトの開発情報を掲載するために始めたブログなのですが、WordPress のプラグインを開発してから、WordPress についての記事も書くようになりました。そのため記事の内容に幅ができてしまったのです。

WordPress の情報を求めてブログを訪ねて来てくれた方が、まったく関係のない開発情報の記事を読んでも面白くないと思いますので、新着記事の表示もカテゴリー別に分けることにしました。

そこで使わせてもらったのが、WordPress Popular PostsWPP Plus Widget というプラグインです。この記事では、コードをコピーして貼り付けるだけで、当ブログと同じ新着記事を表示できる方法を解説しています。

この記事の解説に従って設定すると、トップページではブログ全体の新着記事が表示され、個別の記事ページではその記事が所属しているカテゴリーの新着記事が表示されるようになります。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

この記事は以下の記事の続きになります。必要なプラグインのインストールなどを済ませてから、こちらの記事を読んで下さい。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

新着記事を表示する


新着記事は ダッシュボード > 外観 > ウィジェット で表示の設定を行います。WPP Plus Widget のインストールが済んでいると、新着記事というウィジェットが追加されています。

新着記事をサイドバーに表示する

左側に新着記事と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、新着記事の欄をクリック(タップ)して開いてください。

 

新着記事の設定

設定 解説
タイトル 最新記事と入力してください。ブログトップページに表示される新着記事のタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」の最新記事と入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示される新着記事のタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示している新着記事のカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ 任意の数字 を半角で入力してください。カテゴリーの設定によって適切な値が変わってきます。いろいろ入力して納得の行く表示になる数字を見つけてください。カテゴリーの深さについて開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
記事数 10 を選択してください。新着記事の表示件数を設定します。10 を選択すると記事が 10 件表示されます。

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

サムネイル 解説
noimageのURL 200px × 200px の画像をメディアにアップロードして、その画像の URL を指定してください。新着記事の一覧にはサムネイル画像が表示されますが、各記事にアイキャッチ画像が設定されていない場合、ここで設定した画像が代わりに表示されます。
画像サイズ(横幅/高さ) 100 / 100 を入力してください。新着記事に表示されるサムネイル画像のサイズを指定します。

 

オプション 解説
表示記事を除外する チェックしてください。ブラウザに表示しているページは新着記事の一覧に表示されなくなります。
トップページで表示しない チェックを外してください。新着記事の一覧をトップページに表示したくない場合はチェックしてください。
カテゴリページで表示しない チェックを外してください。新着記事の一覧をカテゴリーページに表示したくない場合はチェックしてください

 

1. noimage の設定方法: 画像をアップロードする

ダッシュボード > メディア > ライブラリ新規追加ボタンを押して、画像をアップロードしましょう。200px × 200px のサイズの画像を推奨します。スマートフォンやタブレットでは倍のサイズをアップロードして、半分のサイズで表示すると綺麗に表示されます。

 

2. noimage の設定方法: 画像の URL を取得する

アップロードした画像をクリック(タップ)すると、画像の表示になると思います。ここで URL と書かれたフォームの中身をコピーしましょう。

 

3. noimage の設定方法: 画像の URL を貼り付ける

サムネイルの noimageのURL 欄にコピーした画像の URL を貼り付けてください。

 

ウィジェットの設定を保存する

すべての設定が終わりましたら、右下にある保存ボタンを押してください。これで新着記事のウィジェットの設定は終わりです。

スタイルシートを適用する


このままでも新着記事は表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category New List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。新着記事にスタイルシートが適用されます。

新着記事の完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、新着記事はこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Fifteen の場合

サイドバーのサイズが狭いため、サムネイル画像と文字のバランスが悪くなってしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > 新着記事 に戻り、サムネイルのサイズを調整します。

サムネイル欄の画像サイズを 100 → 60 に変更して保存してください。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

width: 100px;
  ↓↓↓
width: 60px;

この 100px と書かれている部分を 60px に編集して更新してください。これで新着記事に表示されるアイキャッチ画像のサイズが小さくなります。

 

完成!

アイキャッチ画像が小さくなり、文字とのバランスが良くなりました。上記で解説した部分を編集して、使用しているテーマに合ったデザインに変更してください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


カテゴリー別に新着記事を表示することで、関連の深い記事を読者に紹介することができますので、より魅力的なブログに感じてもらえるのではないでしょうか。

ぜひ人気記事ランキングと一緒に設定してみてください。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別人気記事ランキング

当ブログでサイドバー(スマホの場合はページ下部)に表示しているアイキャッチ画像(サムネイル)付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。

この記事の解説に従って設定すると、トップページではブログ全体の人気記事ランキングが表示され、個別の記事ページではその記事が所属しているカテゴリーの人気記事ランキングが表示されるようになります。

プラグインをインストールして、コードをコピペするだけで、このブログと同じランキングを利用することができます。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

必要なプラグインをインストールしよう


人気記事ランキングを表示するには、WordPress Popular Posts、WPP Plus Widget、Simple Custom CSS and JS という3つのプラグインが必要になります。

 

人気記事のアクセス数をカウントしてランキングにして表示します。ベースになるプラグインなので必須です。

WordPress Popular Posts の機能を利用して、カテゴリー別に人気記事ランキングを表示します。WPP Plus Widget 単独では動作しませんので、WordPress Popular Posts とセットになります。

人気記事ランキングと新着記事のスタイルシートを設定し、 No.1、No.2、No.3 と書かれた文字を Web フォントで表示するために必要になります。子テーマなどを利用して自分でデザインをカスタマイズする方は必須ではありません。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

 

WordPress Popular Posts と Simple Custom CSS and JS は、ダッシュボード > プラグイン > 新規追加 ページでそれぞれの名前を検索してインストール&有効化してください。

WPP Plus Widget はプラグインをダウンロードしてから、ダッシュボード > プラグイン > 新規追加 ページでプラグインのアップロードを行って、インストール&有効化する必要があります。

http://8wired.jp/wpp-plus-widget

上記ページから、最新版(記事を書いてる時点では Ver. 0.4.4)をダウンロードしてインストールしてください。

プラグインのインストール方法について詳しく知りたい方は、こちらの記事を参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

WordPress Popular Posts の設定


最初に WordPress Popular Posts の設定を行う必要があります。ダッシュボード > 設定 > WordPress Popular Posts > ツール を選んで、画像のページを表示させてください。

そして以下の設定を行いましょう。

設定 解説
デフォルトのアイキャッチ画像 画像をアップロードしてください。人気記事ランキングには記事ごとに設定しているアイキャッチ画像が表示されます。アイキャッチ画像が記事に設定されていない場合に表示されるデフォルト画像を設定します。
画像の取得元 アイキャッチ画像を選択してください。
閲覧を記録する対象者 訪問者のみを選択してください。これを選ばない場合、自分のアクセスも人気記事ランキングに反映されてしまいます。表示のテストをする場合は、全員を選んで自分でアクセスを行ってランキングを表示させるのもありです。アクセス数がゼロの場合はランキングが表示されません。
プラグインのスタイルシートを使う 無効を選択してください。今回はオリジナルのスタイルシートで人気記事ランキングのデザインを行いますので、プラグインに付属しているスタイルシートは利用しません。

それぞれ設定を行ったら、その場所にある適用ボタンを押すのを忘れないようにしてください。

アイキャッチ画像については以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

人気記事ランキングを表示する


人気記事ランキングは ダッシュボード > 外観 > ウィジェット で表示の設定を行います。

WPP Plus Widget をサイドバーに表示する

左側に WPP Plus Widget と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、WPP Plus Widget の欄をクリック(タップ)して開いてください。

 

WPP Plus Widget の設定

設定 解説
タイトル 今週の人気記事ランキングと入力してください。ブログトップページに表示されるランキングのタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」今週の人気記事ランキングと入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示されるランキングのタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示しているランキングのカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ を入力してください。開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
パラメータ limit=10
range=last7days
order_by=views
thumbnail_width=200
thumbnail_height=105
excerpt_length=50
stats_comments=0
pid=
上記を入力してください。

 

パラメータ 解説
limit 人気記事ランキングに表示される記事の数です。10 を入力すると 1 位~10 位まで表示されます。
range ランキングを計測する期間です。指定した期間内で人気ランキングの順位が決まります。以下の値を入力することができます。
last24hours: 1日
last7days
: 1週間
last30days
: 1ヶ月
all
: 全期間
order_by ランキングを並び替える基準です。以下の値を入力することができます。
comments: コメント数が多いと上位
views
: 訪問者数(アクセス数)が多いと上位
avg
: 1日あたりの平均ビューが多いと上位
thumbnail_width サムネイルの横幅です。半角数字を入力してください。解説では 200 の入力を推奨していますが、サイドバーの横幅が狭いテーマの場合は小さくしてください。
thumbnail_height サムネイルの縦幅です。半角数字を入力してください。解説では 105 の入力を推奨していますが、上記で設定したサムネイルの横幅に合わせて適切な値を入力してください。
excerpt_length 人気記事ランキングに記事の抜粋文を表示させる場合、表示させる抜粋文の文字数を指定します。
stats_comments 1 / 0
1 を入力するとランキングにコメント数を表示します。0 の場合は表示しません。
pid 1,2,3,4,5
人気記事ランキングに表示しない記事を指定します。ページ ID を入力してください。例えば同じタイプの記事が上位に並んでいる場合に内容のかぶっている記事を除外することで、ランキングに多彩さが生まれます。ページ ID の取得方法

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

オプション

表示記事を除外するをチェックしてください。現在、ブラウザに表示されている記事はランキング内に表示されなくなります。

 

保存する

すべて設定しおわったら保存ボタンを押しましょう。これで人気記事ランキングのウィジェットの設定は終わりです。

スタイルシートを適用する


このままでもランキングは表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category Popular List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングにスタイルシートが適用されます。

Web フォントを適用する


人気記事ランキングのランキングの数字に Web フォントを適用します。絶対に必要な設定ではないのですが、普通のフォントよりもずっと見た目が良くなるので、設定することをおすすめします。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML をクリック(タップ)してください。HTML を追加するページに移動します。

 

2. Web フォントを読み込むコードを入力して保存する

タイトルを入力するフォームに Web Fonts と入力しましょう。そしてその下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングに Web フォントが適用されます。

WordPress での Web フォントの利用について詳しく知りたい方はこちらの記事を参考にしてください。

WordPress – Webフォントの使い方

人気記事ランキングの完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、人気記事ランキングはこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Sixteen の場合

サイドバーの横幅が狭いので、ランキングの数字が重なって表示されてしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > WPP Plus Widget に戻り、サムネイルのサイズを調整します。

パラメータの欄の thumbnail_width を 200 → 150 に変更、thumbnail_height を 105 → 79 に変更して保存してください。これで人気記事ランキングに表示されるアイキャッチ画像のサイズが小さくなります。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

content: 'No. ' counter(wpp-count);
        ↓↓↓
content: '' counter(wpp-count);

この No. と書かれている部分を削除して更新してください。これで人気記事ランキングのランキングの数字部分から、No. という表示が消えます。

 

完成!

アイキャッチ画像のサイズが調整され、No. の表示が消えたことで、ランキングのデザインが綺麗に整いました。

 

それ以外にデザインに影響を与える主な変更ポイントは、スタイルシートのフォントの欄です。

赤枠部分のフォントサイズを変更すると、ランキングの数字の大きさが変わります。また ‘Limelight’ と書かれている部分のフォント名を変更すると、ランキングの数字のフォントが変わります。フォントを変更する場合は、Web フォントを読み込む HTML コードも同時に変えてください。

上記の解説部分を編集しながら、お使いのテーマに合ったデザインを完成させてください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


人気記事ランキングを表示しておくと、読者が他の記事も読んでくれるようになりますので、ブログのアクセスアップに繋がることは間違いありません。頑張って設置してみましょう!

記事が長くなりましたので、現在表示しているページと同じカテゴリーの新着記事を表示する方法は、他の記事に分けて解説させていただきます。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

アイキャッチ画像とは各記事の看板画像のことです。WordPress では、個別の記事ページだけでなく、記事が一覧で表示されるときにも利用されています。

テーマ Twenty Seventeen の個別記事

 

人気記事ランキング

 

テーマ Wallstreet の記事一覧

画像は一例ですが、さまざまな場面で記事を強調する画像として利用されているのがわかると思います。文字だけの記事よりもずっと魅力的に感じますよね。

アイキャッチ画像は特別です


当初、このブログはアイキャッチ画像を使っていませんでした。記事の一番上に大きな画像を載せるのと大して変わらないだろうと思っていたのですが、WordPress の利用経験が長くなってくると、やはり特別な画像なんだなと感じることが多くなりました。

世の中には数多くのテーマがありますが、アイキャッチ画像を上手に利用しているテーマもたくさんあります。ブログトップページでアイキャッチ画像と一緒に記事を一覧表示したり、サイドバーに新着記事を並べるときにも利用していたり、ブログを華やかに見せてくれる要素としてうまく活用しています。

また各種プラグインでも利用されていることが多く、このブログのサイドバーに置いている人気記事ランキングでもアイキャッチ画像を使っています。

WordPress でブログを運営しているけど、アイキャッチ画像は設定していないという方も多くおられると思いますので、ぜひこの機会に使い方を覚えて利用してみてください。

この記事では、アイキャッチ画像の設定方法、おすすめの画像サイズ、SNS での利用方法まで詳しく解説していきます。

アイキャッチ画像の使い方


画像は記事の投稿ページです。アイキャッチ画像は記事の投稿ページで追加・編集することが可能です。これまでに投稿した記事に、後からアイキャッチ画像を追加することもできます。

記事の投稿ページにアイキャッチ画像の欄が表示されていない場合は、上の画像と下の解説を参考にして表示してください。

  1. ページ上部の表示オプションをクリック(タップ)
  2. アイキャッチ画像をチェック
  3. ページ右下にアイキャッチ画像の欄が表示されます

 

アイキャッチ画像を設定する

アイキャッチ画像を設定と書かれたリンクをクリック(タップ)すると、画像をアップロードする画面が表示されますので、作成したアイキャッチ画像をアップロードしましょう。そして右下のアイキャッチ画像を設定ボタンを押すと、記事にアイキャッチ画像が追加されます。

 

アイキャッチ画像が設定される

アイキャッチ画像が設定されると、ページ右下のアイキャッチ画像欄にこのように表示されます。表示されたら記事を保存しましょう。

 

表示されました!

個別の記事ページを確認してみると、さきほど設定したアイキャッチ画像が表示されています。ページトップに大きく表示されていてインパクトは絶大ですね!

アイキャッチ画像のサイズは?


ずばり 1200px × 630px がおすすめです!

WordPress で使用しているテーマによって、アイキャッチ画像の表示サイズは変わってきます。このブログで現在使用しているテーマ Twenty Seventeen では、個別の記事ページでとても大きく表示されますので、このサイズでも大きすぎることはありません。しかし他のテーマではアイキャッチ画像が、それほど大きく表示されないこともあります。

サイズが 1200px × 630px の画像は非常に大きいです。使用しているテーマによっては無駄なサイズに感じるかもしれませんが、このサイズをおすすめしているのには理由があります。

それは Facebook でシェアしたときに画像が綺麗に表示されるサイズが 1200px × 630px だからです。実はアイキャッチ画像は、記事の看板画像としてだけでなく、SNS のシェア用画像としても利用することができます。このサイズにしておくと、それぞれを別に作成する手間がなくなりますので、一石二鳥にも三鳥にもなります。

SNSのシェア用画像とは?


Facebook

Twitter

適切に設定を行った上で Facebook、Twitter それぞれでシェアされると画像のような形で WordPress の記事が紹介されます。サイズが 1200px × 630px の場合、Facebook と Twitter の両方に対応でき、横長の大きな画像が表示されるため、見た目の印象も非常に強くなります。

 

SNSでシェアされたときにどんな表示になるか

現在、あなたのブログがシェアされたときにどんな表示になっているのかチェックする場合は、これらのサイトを利用してください。各記事の URL を入力すると、上記画像のようにシェアされたときの画面が表示されます。

※ それぞれ Facebook と Twitter のアカウントが必要です。

作成した画像をシミュレートしたい方は以下のサイトを利用してください。

SNSのシェア用設定を行う


SNS で画像付きでシェアされるためには OGP という設定を行わなければなりません。

上記のようなタグがブログのソースコードにないと、シェアされたときに画像が表示されません。

WordPress の場合は、OGP の設定が簡単に行えるようになるプラグインが用意されていますので、そちらを利用させてもらいましょう。

All in One SEO Pack

今回は All in One SEO Pack についての設定を解説します。その他の SEO プラグインでも同じ設定が行えますので、他のプラグインを利用されている方はそちらで画像を設定してください。

 

1. アイキャッチ画像の URL を取得する

記事投稿ページのアイキャッチ画像の欄を表示し、画像の上で右クリックを行って画像アドレスをコピーしましょう。

 

2. All in One SEO Pack のソーシャル設定を開く

記事投稿ページの下の方に、All in One SEO Pack の欄があるので、そこのソーシャル設定のタブを開きましょう。

 

3. 画像の URL を貼り付けてサイズを指定する

カスタム画像の欄にさきほどコピーした、アイキャッチ画像の URL を貼り付けましょう。そしてその下の画像の幅を指定画像の高さを指定に、アップロードしたアイキャッチ画像のサイズを入力してください。

今回は 1200px × 630px で画像を作成しましたので、1200 と 630 を入力します。

そして記事を保存しましょう。

これで SNS でシェアされたときに、アイキャッチ画像付きでシェアされるようになります。

 

4. シェアされたときの表示をチェックしましょう

上記で紹介したサイトでシェアされたときの表示をチェックしてみて、以下の画像のように表示されていると設定は正常にできています。

今後は記事を投稿する際に、アイキャッチ画像を設定してから SNS のシェア画像に指定することを忘れないようにしてください。

大変かもしれませんが、この作業を毎回やっていると、シェア数の増加やアクセスアップに繋がる可能性は高いです。ぜひ頑張ってください!

 

Facebook シェアデバッガー

 

Twitter Card validator

最後に


アイキャッチ画像が用意されている記事と用意されていない記事では、読者が受ける印象は大きく変わります。

時間をかけて書いた記事や、みんなに読んでもらいたい記事には、アイキャッチ画像を頑張って用意してみましょう。手間はかかりますが、その分きっといいことがあるはずです。

SNS でバズる(拡散される)ことを目指してシェアボタンの設置も忘れずに!

Game Users Share Buttons v1.2.1 更新情報

WordPress のプラグインで利用した際に、Top(記事の上) と Bottom(記事の下)に指定したシェアボタンの詳細設定を行えるようにしました。

Top & Bottom 詳細設定


シェアボタンを表示するページを指定できます。トップページ、個別投稿ページ、固定ページ、アーカイブページ、それぞれ表示したい場所をチェックして保存してください。

トップページやアーカイブページは通常、記事が一覧で表示されます。そしてそれぞれの記事部分にシェアボタンが表示されるのですが、各記事のシェア数を個別に取得しているわけではないので、実質トップページならトップページのシェア数が表示されているだけです(複数のシェアボタンに同じシェア数が表示されています)

そのため、一覧ページでは記事ごとにシェアボタンを表示する意味はないのではないかと考え、トップページやアーカイブページなどでは、シェアボタンを表示しない設定を行えるようにしました。

またこれまでは、シェアボタン編集 → 余白設定で記事とシェアボタンの間隔を調整していましたが、画像の余白欄で、Top と Bottom の間隔を個別に設定できるようにしました。今後はこちらで余白を設定していただけるとありがたいです。

簡単に貼り付けられる Code を表示


編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。

Code 1: 1ページにつきひとつだけ貼ってください。

<script type="text/javascript" src="https://example.com/blog/wp-content/plugins/game-users-share-buttons/js/share-bundle.min.js"></script>

Code 2: シェアボタンを表示したい場所に貼ってください。

<div data-game-users-share-buttons="gameusers1-m2a4oi43"></div>

Code ボタンを押すとテキストエリアが開いて上記のようなコードが表示されます。記事の上部・下部以外に貼り付けたい場合は、テキストエリアに表示されているコードを利用してください。

貼り付けコードを変更しました


これは大きな変更なのですが、シェアボタンを貼り付けるためのコードを変更しました。

変更前

<div id="game-users-share-buttons" data-theme="gameusers1-olxdmwzh"></div>

変更後

<div data-game-users-share-buttons="gameusers1-olxdmwzh"></div>

HTML の仕様では、同じ id が複数存在しているのは間違いということを知り、修正を行いました。今後は id ではなく、data 属性を利用して、Game Users Share Buttons の表示を行います。

コードを貼り付けて利用している方がおられましたら、お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。

Feedly のシェアが行えなくなっていた問題を修正


Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが、v.1.2.1 で修正を行いました。

リンク


WordPress 記事にソースコードを埋め込むテクニック&プラグイン紹介

WordPress 記事にコードを埋め込む

解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどのソースコードを埋め込んで紹介したくなるときがあります。

この記事ではそんな時に使える、簡単にコードを貼れるタグ、ウェブサービス、おすすめのプラグインを紹介していきます。

簡単にコードを貼れるタグ


まずは簡単にコードを貼れるタグを紹介します。

HTML ではコードを貼る時に、<pre> タグを利用するのが一般的です。<pre></pre> に囲まれたコードは、スペースや改行などがそのまま表示されますので、コードを貼るときに便利です。

プラグインなどを使うまでもない、ちょっとしたコードを貼るときに利用してみてください。

<pre></pre>

<p>シンプルな状態</p>

なにも変更せずにシンプルな状態で <pre> タグを利用すると、上記のような表示になります。

 

<pre style=”color: #ffffff; background-color: #000000;”></pre>

<p>黒色の背景に白文字</p>

背景を黒くして白文字で内部を表示する <pre> タグです。強調されて文字も見やすくなります。プログラマーの方が運営されているブログの場合は、コマンドプロンプトのコマンドを紹介する際などに利用すると、わかりやすいのではないかと思います。

ただし長いコードを入力すると…

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

横向きのスクロールバーが表示され、スクロールしないと全文が見えなくなってしまいます。見にくい上に、コピーしてコードを利用してもらう場合に選択しづらいため、読者に余計な手間をかけることになってしまいます。

 

<pre style=”color: #ffffff; background-color: #000000; overflow: auto; white-space: pre-wrap; word-wrap: break-word;”></pre>

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

そこでおすすめしたいのが、この <pre> タグです。適当なところで自動で折り返すようになっていますので、選択がしやすくコピーも簡単です。このブログでもよく使っているタグなので、よければ使ってみてください。

黒背景が気に入らない場合は color: #ffffff; background-color: #000000; を削除して利用してください。

Gist – ウェブサービスを使う


コードを埋め込んで貼り付ける場合、これが一番おすすめの方法です。

ちょっとしたものだと、<pre> タグで十分なのですが、長いコードを貼りたいときは専用のサービスを利用すると、埋め込んだコードに色がついて綺麗に表示され、とても読みやすくなります。

プラグインに比べると少し手間はかかるのですが、プラグインをインストールしなくて済むので、WordPress が無駄に重たくならないというメリットもあります。

ここで紹介している Gist は GitHub が運営している、手軽に各種コードを管理できるウェブサービスです。

 

Gist でコードを貼り付けるとこんな感じになります

バージョン管理もできるので、過去のコードをチェックすることも可能です。コードを編集した後に、あれ、前のコードどんなだっけ?ということがなくなります。

Gist を利用するには、GitHub のアカウントが必要になります。アカウントの作り方から解説しますので、Gist を利用してみたい方は記事を参考にしながら試してみてください。

Gistの使い方


1. Gist のページに移動する

Gist: https://gist.github.com/

上記のサイトにアクセスして、Sign in と書かれているボタンを押してください。

 

2. 新規アカウント作成ページに移動する

Create an account. と書かれた部分を押して、アカウント作成ページに移動しましょう。GitHub のアカウントをすでに持っている方は、このページでログインしてください。

 

3. アカウントを作成する

Username: ユーザーネーム
This will be your username. You can add the name of your organization later.
翻訳:これはあなたのユーザー名になります。後で組織の名前を追加できます。

Email address: メールアドレス
We’ll occasionally send updates about your account to this inbox. We’ll never share your email address with anyone.
翻訳:この受信トレイにアカウントの更新情報を送信することがあります。あなたのメールアドレスは決して誰とも共有しません。

Password: パスワード
Use at least one lowercase letter, one numeral, and seven characters.
翻訳:少なくとも1つの小文字、1つの数字、および7つの文字を使用します。

入力したら Create an account ボタンを押しましょう。

 

4. Gist を利用する

アカウントを作成したらログインして、さきほどの Gist トップページに移動しましょう。画像のページが表示されたら、コードの説明文・ファイルネーム・埋め込みたいコードを入力しましょう。

ファイルネームは拡張子も一緒に入力してください。html の場合は .html、スタイルシートの場合は .css、JavaScript の場合は .js、こんな感じです。

入力し終わったら、Create public gist ボタンを押しましょう。これは公開用のコードを作成するボタンです。今回は WordPress で公開しますので、secret ではなく public を利用します。

 

5. 埋め込み用コードを取得する

コードが作成されると、このような画面になります。画像赤線の Embed と書かれた場所に、埋め込み用のコードがありますので、コピーして WordPress の投稿ページに貼り付けましょう。貼り付けるときは、テキストエディタで行ってください。ビジュアルエディタを利用すると正常に表示されません。

 

6. 完成!

スタイルシートのサンプルコードを埋め込んでみました。

 

7. 編集するときは?

コードが間違っていて編集したいときは、画像のページに移動して、Edit ボタンを押しましょう。編集用のフォームが表示されます。

Gist のページに移動するときは、埋め込みコードのファイル名のリンク(今回の場合は sample.css と書かれた部分)「sample.css hosted with ❤ by GitHub」を開いてください。

これまでに投稿したコードの一覧を見れたりもしますので、管理もしやすくなっておすすめです。英語のサイトでアカウントを作成するのは、若干ハードルが高く感じてしまうかもしれませんが、慣れてしまえば簡単なので、ぜひ試してみてください。

コード埋め込みプラグインの紹介


WordPress には、コードを埋め込むためのプラグインがたくさんあります。これらのプラグインを利用すると、最も簡単にコードを埋め込むことができるようになります。それぞれ見た目や使い勝手が違いますので、いろいろ試してみて気に入るものを見つけてください。

高機能なものから、シンプルで軽量なプラグインまで、さまざまなものが揃っています。コードを貼り付けたときのサンプル画像付きで、各プラグインを紹介しています。

最後に


それぞれの方法にメリット・デメリットがありますので、自分の使い方に合った方法を採用してください。

<pre> タグ
メリット:簡単に貼れる。
デメリット:色がつかないのでコードが長いと読みづらい。

Gist(ウェブサービス)
メリット:バージョン管理ができる。これまでに投稿したコードを一覧でチェックできる。
デメリット:アカウントを作らなければならない。<pre> タグやプラグインに比べると手間がかかる。

プラグイン
メリット:最も簡単にコードを貼れる。
デメリット:プラグインをインストールするので WordPress が重たくなる可能性がある。

WordPress ページID・記事ID・pidの取得方法

WordPress のプラグインを設定していると、pid という設定項目が出てくることがあります。これは ページ ID という各記事ごとに割り振られている固有の ID を入力する項目です。ページ ID は記事や固有ページを作成した際に自動で設定されます。

この記事ではページ ID の取得方法をスクリーンショット付きで解説していますので、必要な方は参考にしてください。

記事のページIDを取得する方法


1. 投稿一覧を表示する

ダッシュボード > 投稿 > 投稿一覧 に移動してください。そしてページ ID を取得したい記事のタイトルをクリック(タップ)しましょう。

 

2. ブラウザのアドレス欄をチェックする

ページを移動してからブラウザ上部のアドレス欄を確認すると、以下のような URL が表示されていると思います。

https://gameusers.org/dev/blog/wp-admin/post.php?post=1555&action=edit

赤文字の数字が記事のページ ID です。post= の後に数字が表示されていますので、それを取得して利用してください。

固定ページのページIDを取得する方法


1. 固定ページ一覧を表示する

ダッシュボード > 固定ページ > 固定ページ一覧 に移動してください。そしてページ ID を取得したい固定ページのタイトルをクリック(タップ)しましょう。

 

2. ブラウザのアドレス欄をチェックする

ページを移動してからブラウザ上部のアドレス欄を確認すると、以下のような URL が表示されていると思います。

https://gameusers.org/dev/blog/wp-admin/post.php?post=1108&action=edit

赤文字の数字が記事のページ ID です。post= の後に数字が表示されていますので、それを取得して利用してください。

ページID・記事ID・pid


読み方はそれぞれ違いますが、これらの設定項目が出てきたときは、上記の方法で ページID を取得して入力すれば OK です。

WordPress ページトップに戻るボタンをつけよう – WPFront Scroll Top

スクロールが非常に長くて、上まで戻るのが大変!ブログトップはもちろん、文字数の多い記事や、カテゴリー、タグページなどでもそうなりがちですよね。読者に優しいブログにするために、ワンクリックでページトップに戻れるボタンをつけましょう。

この記事では、ページトップに戻れるボタンをつけられるプラグインについて詳しく解説しています。

 

完成品

WPFront Scroll Topをインストールしよう


WordPress には戻るボタンをつけられる、いろいろなプラグインが存在していますが、特におすすめなのが、WPFront Scroll Top というプラグインです。

70 種類以上のボタンが使える

デフォルトで 70 種類以上のボタンが使え、オリジナルの画像をボタンとして使用することも可能です。設定が細かく行えますので、カスタマイズ性もとても高くなっています。

ダッシュボード > プラグイン > 新規追加 で WPFront Scroll Top を検索して、インストール & 有効化してください。

プラグインのインストール方法がわからない方は以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

WPFront Scroll Topの使い方


1. 設定ページに移動する

インストールが終わったら、ダッシュボード > WPFront を押して、プラグインの設定ページに移動しましょう。

 

2. ボタンを表示する設定を行う

ボタンを表示するのに最低限必要な設定は以下になります。

 設定  解説
Enabled チェックしてください。プラグインを利用するという意味です。
JavaScript Async チェックしてください。JavaScript というプログラム言語でボタン機能を実現していますが、これを非同期で読み込む設定です。チェックしておくとブログの表示が速くなります。ボタンが正常に表示されなかった場合はチェックを外してください。
Image Button 表示したいボタンを選んでください。好きなボタンを選んでください。後から変更することもできますので、とりあえずでも構いません。

上記、3つの設定を行うだけでボタンを表示することができます。設定が終わりましたら、一番下までスクロールして 変更を保存 ボタンを押してください。

 

3. ボタンを確認する

ブログを確認してください。少しスクロールを行うと、右下にボタンが表示されると思います。押すとページトップに移動します。

とても簡単に表示できましたね!選べるボタンもたくさんあるので、いろいろ試しながらブログのデザインにあったボタンを探してみてください。

オリジナルのボタンを使用する方法


試してみたけど、ボタンのデザインが気に入らなかった。もっと他のボタン画像はないの?ボタンを自作したい!そういった方のためにボタン画像をアップロードして使う方法を解説します。

まず素材サイトなどでボタン画像をダウンロードしてください。

今回は例として、やじるし素材天国からこちらの画像を利用させてもらいました。

 

1. ボタン画像をアップロードする

ダッシュボード > メディア > 新規追加 を選択して、画像のページに移動してください。ここにファイルをドロップと書かれた場所に、ボタン画像をドラッグ&ドロップするか、ファイルを選択からボタン画像を選んでください。

処理中…と書かれたまま、動作が止まってしまうことがありますが、ほとんどの場合、正常にアップロードは終わっていますので、次に進みましょう。

 

2. メディアライブラリに移動する

ダッシュボード > メディア > ライブラリ を選択して、さきほどアップロードしたボタン画像を選択しましょう。

 

3. ボタン画像のURLを取得する

添付ファイルの詳細という画面が表示されますので、右側にある URL というフォームに書かれている URL をコピーしてください。フォームを選択してキーボードの Ctrl + A を押すと選択できます。次に Ctrl + C でコピー完了です。

 

4. 設定ページに戻り、URLを貼り付ける

ダッシュボード > WPFront を選択し、設定ページに戻ったら下の方にスクロールを行い、Custom URL と書かれたフォームに、さきほどコピーした URL を貼り付けてください。そしてラジオボタンをチェックしてから(画像のように青●をつける)変更を保存 ボタンを押してください。

 

5. ボタンをチェックする

巨大な指が表示されました!邪魔過ぎる大きさです。素材サイトなどの画像を利用させてもらう場合は、あらかじめ画像編集ソフトなどで大きさを調整しておくとこういうことにはなりません。

画像のサイズは画像編集ソフトで調整することもできますが、設定ページで、Button Size のフォームに数値を入力することでも調整が可能です。

横 ○○ px × 縦 ○○ px です。片側だけ数値を入力しても、自動的に縦横比を調整してくれます。

※ スマートフォンやタブレットなどのモバイル機器で、画像を綺麗に表示したい場合は、表示したい大きさの倍のサイズの画像をアップロードして、Button Size で半分の値を入力すると綺麗に表示されます。

WPFront Scroll Topの設定解説


WPFront Scroll Top には設定できる項目がたくさんあります。

Display  解説
Enabled チェックするとボタンが表示されます。一時的に無効にしたい場合にチェックを外してください。
JavaScript Async このプラグインは JavaScript というプログラム言語で機能を実現していますが、チェックすると非同期で JavaScript を読み込んでブログの表示を速めます。ボタンが正常に表示されなかった場合はチェックを外してください。
Scroll Offset ボタンは少しスクロールされてから表示されます。この表示されるまでの距離を設定します。大きい数値を設定すると、ある程度スクロールされてから表示されるようになります。
Button Size 表示するボタンのサイズです。横、縦の幅をそれぞれ px で設定します。片側だけ入力しても自動的に縦横比が計算されて、適切なサイズで表示されます。
Button Opacity ボタンの透明度を設定します。数値を小さくすると透明に近づき、大きくすると透明度が下がります。
Button Fade Duration スクロールが上に到達したときにボタンが消えますが、消えるまでの時間を設定します。大きな数値を設定すると、ゆっくりと消えるようになります。
Scroll Duration ボタンを押した時に、どのくらいの速度で上に移動するかの設定です。大きな数値を入力すると、ゆっくり上に戻ります。
Auto Hide チェックすると、スクロールしないでしばらく時間が経つとボタンが自動的に消えます。
Auto Hide After 上の消えるまでの時間を設定します。例えば 2 を設定すると、スクロールせずに 2 秒経つと自動でボタンが消えます。
Hide on Small Devices アクセスしたデバイスの横幅が小さい場合は、ボタンを表示しません。スマートフォンなどの横幅の小さいデバイスでボタンを表示すると、記事が読みにくくなったりする場合は、チェックしておくとボタンが表示されなくなります。
Small Device Max Width 上の設定とセットです。ここで設定した横幅未満のデバイスではボタンを表示しません。
Hide on Small Window Hide on Small Devices のブラウザ版です。チェックすると、ブラウザの横幅が小さいときにボタンを表示しません。
Small Window Max Width 上の設定とセットです。ここで設定した横幅未満のブラウザではボタンを表示しません。
Hide on WP-ADMIN ダッシュボードなどの管理者ページでは、ボタンを表示しません。邪魔に感じた場合はチェックしておくといいでしょう。
Hide on iframes チェックしておくと、ポップアップの中など、インラインフレームではボタンを表示しません。
Move Admin Menu チェックすると、設定ページが ダッシュボード > 設定 > Scroll Top に移動します。チェックを外すと ダッシュボード > WPFront に戻ります。
Button Style ボタンを Image: 画像、Text: 文字、Font Awesom: アイコンフォントの 3 つから選択することができます。

 

Location  解説
Location ボタンを表示する場所を設定します。
Bottom Right: 右下
Bottom Left: 左下
Top Right: 右上
Top Left: 左上
Margin X ボタンを表示する位置を指定します。Location の設定で、○○ Right を選んだときはブラウザの右からの距離。○○ Left を選んだときはブラウザの左からの距離になります。
Margin Y ボタンを表示する位置を指定します。Location の設定で、Bottom ○○ を選んだときはブラウザの下からの距離。Top ○○ を選んだときはブラウザの上からの距離になります。

 

Filter  解説
Display on Pages ボタンを表示するページを設定できます。
All pages: すべてのページに表示します。
Include ~: 指定した記事 ID に表示します。
Exclude ~: 指定した記事 ID を除外して表示します。

 

Image Button  解説
Custom URL オリジナルの画像を使う時に、画像の URL を入力します。
Image ALT 画像の読み込みに失敗したときや、音声読み上げブラウザを利用した際に画像の代わりに読み込まれるテキストになります。ページトップに戻る や Back to top などと入力しておくといいでしょう。

最後に


ページトップへ戻るボタンを用意しておくと、とても便利ですし、ブログの回遊率アップにも繋がると思います。

記事を充実させるだけでなく、インターフェースや使い勝手についても意識していくと、ブログの評価がぐっと高まるのではないでしょうか。