WordPressの記事をPCで表示する際に、個別の記事の長さに応じてサイドバーの長さをそれなりに調整してみた。

By | 2017年12月19日 , Last update: 2022年8月7日
0 Comment

はじめに

本サイトでは、Wordpressを使っているサイトの記事にPCからアクセスすると、2カラムのページレイアウトで表示されます。2カラムのうち、片方のカラムに記事(または検索の結果)が書かれていて、もう片方のカラムはサイドバーになっています。ところが、記事の長さが記事によってかなり差があるので、ページの下までスクロールすると、サイドバーははるか上方の彼方に行ってしまっている記事や、逆に記事が上方の彼方に行ってしまっている記事が結構あります。

そこで、サイドバーの長さを記事の量に応じてある程度調整する方法を考えて、かつ簡単に試してみたので、この記事ではそれについて書いていきます。

スポンサーリンク

目標のようなもの

まず、以下のような目標(*)を設定します。

  • 今どきのPCでブラウザを全画面表示としてから、本記事のページ(検索結果が表示されるページについては別途考えることにして、ここでは除外します。)にアクセスして記事の一番下までスクロールしたときに、サイドバーの内容がちょっとでも見える状態になっていること。ただし、表示されている内容については考慮しない(広告であっても構わない)。
  • 前項の状態になっているページが全体の50%以上となること。

とりあえず、やってみた手法

とりあえず、以下の方法を試してみました。要するに、記事の長さに応じてサイドバーの末尾に広告を追加していく方法です。また、以下の手法で広告を追加するのはPCからのアクセスに限定し、PC以外の端末からのアクセスの場合は以下の手法は行わないこととします。

  1. この記事の方法でアクセスされた記事$l$の文字数を求めます。これを仮に$S_l$とおきます。
  2. $l$の記事にGitHub Gistに置いたソースコード等の例が貼り付けられていないかどうかを調べます。もし貼り付けられている場合には、$S_l$の値を2倍します。なお、GitHub Gistに置いたソースコード等の例が貼り付けられていないかどうかを調べるのは、MariaDBのregexp演算子を使うと、以下のようなSQL文を実行することにより、1回のSQL文の発行で求めることができます。
    select post_content regexp ‘github.com’ as gist_flg, sum(char_length(regexp_replace(regexp_replace(regexp_replace(regexp_replace(post_content,'(?s)<div class=\”code\”>((?!</div>).)*?</div>’,”),'<.+?>’,”),’&.+?;’,’_’),'(\s+|\r\n|\n)’,”))) as total from wp_posts where id = 1;

     

  3. $S_l$の値が2000を超えている場合には、サイドバーにGoogle AdSenseの広告を1枚とAmazonの広告を1枚追加します。
  4. $S_l$の値が3000を超えている場合には、前項の広告に加えて、サイドバーにGoogle AdSenseの広告を2枚とAmazonの広告(小型のもの)をさらに1枚追加します。
  5. $S_l$の値が3500を超えている場合には、前項及び前々項の広告に加えて、サイドバーにGoogle AdSenseの広告を1枚追加します。

目標(*)が達成てきるかどうか確認してみる。

前項の手法で目標(*)が達成できるのかどうか、確認してみます。といっても、自宅にはそれほどリッチな機材があるわけではないので、WXGA (1366×768)のディスプレイで実際にブラウザ(Google Chrome)を起動して全画面モードで表示し、目標(*)が達成できているページがどのくらいあるのかを調べてみました。

この記事を書いている時点(2017年12月19日現在)での結果は以下の通りとなりました。

  1. 記事の一番下までスクロールしたときに、サイドバーの内容がちょっとでも見える状態になっている記事(**): 35件
  2. 上記以外の記事: 32件

(**)の中にはサイドバーが大きく突き出しているものもありましたが、前項の手法により目標(*)は達成できているようです。ad-hocに考えた手法の割にはいい感じになっていると思います。

まとめ

本記事では記事の量に応じてサイドバーに広告を追加することで、サイドバーの長さを調整してページの表示状態のバランスを整える方法について書きました。広告を追加することについては賛否両論があるかもしれませんが、そもそもサイドバーには記事に関連する情報を掲載するものであると考えると、記事の情報量に応じた「記事に関連する広告」をサイドバーに掲載するのは個人的はありだと思っています。

ただ、本サイトのGoogle AdSenseの広告はレスポンシブなものが多いために、実際に追加される広告の大きさはページがロードされた際に決まるものなので、もし広告の大きさを固定する必要がある場合には、決まったサイズの広告枠に差し替えることはあるかもしれません。

この記事は以上です。

Related Posts / 関連ページ

スマホで撮影した手ブレの酷い動画を後から補正してみた(1): VirtualDub+Deshaker+FFMpeg Input Pluginをインストールしてみた。 Annotation By Country プラグイン(2): wordpress.orgにプラグインを登録してみた。 本Webサイトの平成最後のFedora OSのアップデートとHTTP/2の設定とWordPressのClassic Editorのインストール。 Fedora 32からFedora 33へのupgrade