WordPressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

      2020/07/13

こんにちは、管理人@SS_mshpです。

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、関連記事表示機能を実装』をやってみます。

適切な関連記事でPVや滞在時間を稼げると、自社サービスを売る他にも、アドセンス広告収益などの面でもメリットが出てきます。プラグインではなくPHPなので少し難しくなりますが、さっそくやってみましょう。

なぜ関連記事があるとよいか?プラグインを使わないメリットは?

読者が興味をもつジャンル関連記事も表示して、PV・滞在時間を増やす


当サイトの場合です。例えば『カテゴリーが音楽理論』という記事を見たときに、読み終わったあと下の部分に『同じカテゴリの音楽理論記事』が、関連記事で出るようになっています。音楽制作に興味があるユーザーの場合、そのほかの同カテゴリ音楽理論記事を見てくれる確率が高くなります。見てもらうとPVや滞在時間が増え、サイトの印象をしっかり残すこともできます。

なお、テーマによっては既に実装されていたり、されていなかったりするので、ない場合は『プラグイン』『PHPで作る』などで対応することになります。

プラグインを使用しないことにより、最低限のシンプルなプログラムで動作を軽く

WordPressのプラグインでよくある問題は『いっぱい入れると重くなる』です。表示を速くしたりサーバー負荷を減らすためには、プラグインなしでできることは、なるべくプラグインなしで行うのがベターです。

特に必要な機能だけにしぼってプログラムを作れば、シンプル&軽くできます(余計な処理はさせないなど)。

PHPで関連記事取得、ループを交えて複数表示を

WP関連記事プログラムで使ったコード

githubのgistに書いてみましたが、こんな感じのコードになりました。記事の下に同じカテゴリー関連記事を出したいから、個別投稿 (single.php)内にこれを入れてみました。テーマによっては、適切な位置を見つけるのが難しいかもしれません。

WP関連記事プログラムのポイント

  • get the categoryはカテゴリを配列で返す
  • foreachは配列要素を取得する
  • if文で記事が入っている場合に、whileでループ処理がスタート(複数の記事を出せる)
  • WP Queryは投稿やページのリクエストを扱う、定義済みクラス
  • dl・dt・ddは定義リストのタグ(レイアウトを変えたい場合はCSSのクラスを指定)
  • if(wp_is_mobile())は、モバイルのときサムネを出したい
  • the_post_thumbnail( array( 200, 125 ) );で、サムネサイズ指定した
  • タイトルをリンクにするのにthe_permalink();と、the_title();を使用

プログラムのポイントをまとめると、こんな感じでした。PHPの組み込み関数・よく使う文・WP定義済み関数などがいろいろ入ってきますが、一個一個働きを見ていくと大丈夫かと思います(管理人は文系ですが大丈夫でした)。
また、WP Queryは、記事取得とかループでよく使われるようなので、Codex内のサンプルプログラムも見ておくとよいでしょう。

■関数リファレンス/WP Query
http://wpdocs.osdn.jp/関数リファレンス/WP_Query

実際の表示例(スマホPVがやけに多いから、スマホだけサムネが出る)

先日作った、映画やドラマ・コミック情報のサイトにつけてみました。テーマはMaxwellを使っていたのですが、最初、関連記事が出てこなかったのでPHPで作ったわけです。

PCはあまりアクセスがないからサムネ出しませんでした(笑)
記事を読み終わったあとに、同じカテゴリ内の記事がこのように出てきます。サムネを出す場合は、まずどういうレイアウトにするかを検討して、それにあわせたCSSを組んでください。


アクセスが多いスマホの場合は、条件分岐でサムネが出るようにしたのでこんな風になります。中央寄せをしたい場合はCSSを調整すればokです(ここまでやったら、あとはCSS調整とかになります)。

あとがき・まとめ

少しややこしい感じでしたが、無事に関連記事機能を実装することができました。これによってPV・滞在時間拡大ができるようになってきました(もちろんアドセンス収益も少しずつ上がっています笑)

関連記事機能がないテーマをお使いの場合は、ライバルに遅れを取らないよう、導入を検討してみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 - , ,

  関連記事

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、1つのW …

WP管理画面を使いやすく~カスタムフィールド数値ソート・余計な余計な列を非表示(manage_edit-post_sortable_columnsフックなど)

今回は、カスタムフィールド表示などをつけてごちゃごちゃしてきたWP管理画 …

【ユーザーデータ取得】WordPress定義済み関数の『get_userdata()』『wp_get_current_user()』ってどのように違うの?

今回は、WPシステムのwebサイト制作などでちょくちょくお目にかかる、W …

WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる

今回は、管理するサイトが増えてきて、『id/pass管理めんどくせ~』っ …

【METAタグで新サイトに転送】meta http-equiv=”refresh”で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送&活用テク …

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手についてきた、 …

侍エンジニア塾ブログにあったPHPコードをシンプルに書いてみる(foreachで配列キーや値取得・continueで空要素スキップ)

今回は、(自分もまだプログラム学習中の身ですが)よくある『プログラム学習 …