▶パソコンの寿命は?パソコン買い替えのマメ知識とおすすめ処分方法

WordPress プラグインを使わないで内部リンクのブログカードを設置する方法(回遊率の底上げ)

About WordPress

WordPress で運営される多くのブログさんで「ブログカード(リンクカード)」は使われていると思います。当ブログでもブログカードの利用頻度は高いです。

こういうのがブログカードですね。

強調したい内部リンクなんかは、ブログカードを使うとクリックされやすくなり、ブログ回遊率の底上げになります。

さて、うえにサンプルで貼り付けたブログカードは、プラグインを利用していません。style.css と function.php にコードを記述して WordPress のショートコード機能だけで実現しています。

ブログカードはちゃんとモバイル対応

もちろんスマホやタブレットで表示した時にはモバイルレイアウトに切り替わります。

プラグインを使わない理由は「プラグインを使うと表示速度が遅くなるから」です。

プラグインを使わないでも実現できることは、できるだけプラグインを使わないことが WordPress ページの表示を速くすることに繋がります。

今回は「回遊率の底上げにもなる! WordPress プラグインを使わないで内部リンクのブログカードを設置する方法」を紹介します。

プラグインのブログカードを使うことのデメリット

  • プラグインのブログカードはデザインが圧倒的にダサイ
  • レイアウトやデザインを自分好みに変更するのも一苦労
  • 表示が遅くなる・重い

このような理由から、内部リンクぐらいはプラグインレスのブログカードを使うと良いと思うのです。

プラグインを使わないでブログカードを設置する手順

function.php の設定

まずは、以下のコードを子テーマの function.php にコピーして貼り付けます。

任意で変更ができる箇所は・・・

プラグインを使わないでブログカードを設置する手順01

  • ①:サムネイルの横幅を任意の数値を入れて調整できます
  • ②:サムネイルの縦幅を任意の数値を入れて調整できます
  • ③:アイキャッチの無い記事で表示する画像を URL を入れてください

こちらは、実際に記事に表示されるブログカードの HTML コードです。

プラグインを使わないでブログカードを設置する手順02

HTML と CSS を理解しているなら、ここもいじっていただいて大丈夫です。

他の部分はいじらないのが無難です。

ブログカードのレイアウト用 CSS

ブログカードのレイアウト用の CSS を、子テーマの「style.css」へ追記します。

以下、ブログカードレイアウトの CSS 構造を表した参考画像です。

プラグインを使わないでブログカードを設置する手順04

これを参考にレイアウトを調整してみてください。

ブログカードを記事に挿入する手順

記事本文エリアに以下のショートコードを入力することで、記事にブログカードを挿入することができます。

クラシックエディタですが、参考までに・・・

プラグインを使わないでブログカードを設置する手順06

このようにショートコードを入力します。

ここがポイント!

使いたい時すぐに使えるようにするには、プラグイン AddQuicktag にショートコードを登録したり、IME の単語辞書にショートコードを登録するとよいです。

因みにぼくは、IME の単語辞書に「ないぶ」で、このショートコードが出るように登録しています。便利!

注意

このブログカードは「外部リンク」には使えません。「内部リンク」のみに使うことができます。ここ注意してくださいね。

サンプルがてら「こちらの記事もいかがですか?」

プラグインを使わないブログカードは、プラグインを使った時と比べて、記事ページの表示が速くなったとわかるぐらい差があります。

できそうだな? チャレンジしてみよう! というブロガーさんはぜひ、プラグインレスのブログカードお試しください。

以下、ブログカードのサンプルがてら、当ブログの役に立つ別記事紹介です!