WordPress Popular Postsを再び実装してみた。ウィジェットやショートコードを使わずに。

2019年09月19日 正午の月齢:20.1  月名:二十日余の月  潮汐:中潮 月齢:20.1[二十日余の月] 潮汐:中潮 旧暦:2019年08月21日 仏滅
19時間前に投稿 | WordPress | コメントはありません

5分ぐらいで読めます。

人気のある記事を表示するプラグイン「Popular Posts」は、10年ほど前に実装していたのですが、PHPのバージョン変更などのためしばらくアンインストールしていました。最近どんな記事が読まれているのかちょっと気になるので、今後の投稿のための統計を取る意味も含めて改めて「WordPress Popular Posts」をインストールすることにしました。

いろいろときめ細かな設定ができるのですが、そのあたりは他のサイトのほうがずっと詳しいので割愛しますね。

さて、実装にあたり、一般的にはサイドバーにウィジェットから設置することが多いと思うのですが、個人的にウィジェットを使う文化がないので、ウィジェットもショートコードも使わずに直接PHPをサイドバーに埋め込みます。

<h2>ここ1年の人気記事Top10</h2>
<?php
if (function_exists('wpp_get_mostpopular')) {
wpp_get_mostpopular(array(
'limit' => 10,
'range' => 'custom',
'time_quantity' => 12,
'time_unit' => 'month',
'title_length' => 200,
'thumbnail_width' => 40,
'thumbnail_height' => 40,
'stats_views' => 0
));
}
?>

こんな感じで記述します。今回は件数を10、レンジを1年(12か月)分の範囲としました。ビューの件数はパラメータを0(非表示)にしています。記事のタイトルが長くても特に困らないので、たっぷり目に200としておきました。

集計期間を変えたいときは、

<h2>ここ12時間の人気記事Top10</h2>
<?php
if (function_exists('wpp_get_mostpopular')) {
wpp_get_mostpopular(array(
'limit' => 10, /* list up to 5 posts */
'range' => 'custom',
'time_quantity' => 12,
'time_unit' => 'hour',
'title_length' => 200,
'thumbnail_width' => 40,
'thumbnail_height' => 40,
'stats_views' => 0
));
}
?>

という感じで。これで12時間のうちの人気記事が出ます。

ソースをみるとこのようになっています(***の部分は実際にはいろんな文字が入っていますヨ)。

<h2>ここ1年の人気記事Top10</h2>

<!-- WordPress Popular Posts -->

<ul class="wpp-list">
<li><a href="https://susu.cc/***" title="***" target="_self"><img src="https://susu.cc/***" width="40" height="40" alt="***" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://susu.cc/***" title="***" class="wpp-post-title" target="_self">***</a> <span class="wpp-meta post-stats"></span></li>

…中略…

<li><a href="https://susu.cc/***" title="***" target="_self"><img src="https://susu.cc/***" width="40" height="40" alt="***" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://susu.cc/***" title="***" class="wpp-post-title" target="_self">***</a> <span class="wpp-meta post-stats"></span></li>

</ul>

デフォルトの設定では見出しがh2要素、内容がul要素のリスト形式で吐き出されるので、見た目を変えたいときはCSSをいじったらOK。

まだプラグインを入れてから日が浅いので、コロコロと順位が変動していますが、そのうち落ち着いてきていいデータが取れると思います。

最近改めて「白い雪のプリンセスは」をよく聴く。

2019年09月17日 正午の月齢:18.1  月名:寝待月  潮汐:中潮 月齢:18.1[寝待月] 潮汐:中潮 (最終更新日:2019年09月18日) 旧暦:2019年08月19日 友引
3日前に投稿 | 分類無用 | コメントはありません

1分ぐらいで読めます。

ここしばらくボカロ曲をあまり聴いていなかったのですが、最近になってちらほら聴くようになっています。とはいうもののレパートリーはものすごく限定されていて聴きまくっているわけではありません。

そんな中、数少ないレパートリーの中でも最も心地よい曲が「白い雪のプリンセスは」です。疾走感のあるメロディーと文学的な歌詞が頭の中でグルグルと繰り返してくれるので、深夜のドライブにはうってつけなのでした。

「Kansai WordPress Meetup@京都」に参加してきた。

2019年09月15日 正午の月齢:16.1  月名:立待月  潮汐:大潮 月齢:16.1[立待月] 潮汐:大潮 旧暦:2019年08月17日 赤口
5日前に投稿 | WordPress | コメントはありません

1分ぐらいで読めます。

[京都] Kansai WordPress Meetup@京都 #5 「プラグインの話をしよう」に行ってきました。昨年8月に参加して以来でしたが、今回もとてもタメになるお話を聴くことができました。

wpmeetupkyoto2019

ふだんWordPressをカスタマイズするときは、テーマファイルのPHPをゴシゴシいじるっていう方法しか知らないので、大量のプラグインで構築していく手法にびっくり。文化の違いを感じました。

wpmeetupkyoto2019

1次懇親会のあとにもWordPressサイトの引っ越し方法について熱い講義がありました。デザイナーが作るスライドショーはとても見やすくてわかりやすい。

Kansai WordPress Meetup #11

2019年9月21日開催の[神戸]Kansai WordPress Meetup #11 「テーマの選び方、使い方」も行きたいところですが、家庭内行事が複数重なっているので行けません。週末に何もかもがありすぎるのよね。

今回、いろいろな人の話を聴いている中で、「そろそろホントに使いにくいGutenbergを使わざるを得ないのかも」っていうことを、ちょっと感じてしまったのでした…

PHPでランダムに選択問題を出し続ける仕組みをつくる。

2019年09月13日 正午の月齢:14.1  月名:十五夜  潮汐:大潮 月齢:14.1[十五夜] 潮汐:大潮 (最終更新日:2019年09月16日) 旧暦:2019年08月15日 仏滅
7日前に投稿 | ウェブ・IT関係 | コメントはありません

10分ぐらいで読めます。

2月にある国家試験を受けたものの無残に不合格だったので、なんとか空き時間を使って勉強したいなと思いました。というわけで、選択問題が次々と出てきて回答を脳に浸み込ませるようなeラーニング環境をPHPを使って構築してみます。

とはいうものの、当然1から構築するような技術は持ち合わせていないので、いつもどおり他人のふんどしで相撲を取るしかありません。参考にしたサイトは、

さて、仕様としては、

  • 「選択問題が出る」→「ラジオボタンを選択して送信」→「正解か不正解かを表示」→「次の問題へ」が延々と繰り返される
  • 選択肢の順番と次の問題の出現はランダムに表示したい
  • 正答率や得点はどうでもいいのでただひたすら問題が出てくる

という方向でいきましょう。

「PHPでランダムに選択問題を出し続ける仕組みをつくる。」の続きを読む。

常に画面のど真ん中に文字を配置するCSS

2019年09月11日 正午の月齢:12.1  月名:十三夜  潮汐:中潮 月齢:12.1[十三夜] 潮汐:中潮 (最終更新日:2019年09月16日) 旧暦:2019年08月13日 友引
1週間前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

ふだんはあまりセンタリングしないのですが、どうしても画面のど真ん中に文字を配置したくなって、CSSを探してみるといろいろな方法がありました。その中でも特にシンプルなものを備忘録として書いておきます。

HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>どまんなか</title>
</head>

<body>
<p>どまんなかにテキストが出るよ</p>
</body>

</html>

CSS

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

p {
text-align: center;
}

記述が少なく安定しているので、いろいろと応用がきくと思います。

…ところで数年前に勤務管理システムを構築したとき、あのときもスタート画面のど真ん中にテキストを配置したんだけど、どんなCSS書いたかな。うーん、全然覚えてない。

PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。

2019年09月09日 正午の月齢:10.1  月名:十日余の月  潮汐:若潮 月齢:10.1[十日余の月] 潮汐:若潮 (最終更新日:2019年09月16日) 旧暦:2019年08月11日 赤口
2週間前に投稿 | ウェブ・IT関係 | コメントはありません

6分ぐらいで読めます。

パソコンだけでなくスマートフォンでもFirefoxを愛用しているのですが、先日あるサイトを訪れたときに、アドレスバーの横に見慣れないアイコンが出ているのに気が付きました。

謎の家型アイコン

そのアイコンを押してみると、「ホーム画面に追加」というダイアログがにゅっと出てきて「ホーム画面に追加しますか?」という感じでとても自然にホーム画面への追加が誘導されます。なんかカッコイイ!

ぜひ取り入れてみたいけれど、これはいったいなんなんだろう…

どうやらこれは「Service Worker」というものらしい。早速実装に挑戦してみました。

「PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。」の続きを読む。

Translate »