煤式自動連結器

今まで、サイドバーの「最新の記事」に表示される記事名には、アイキャッチ画像を設定しているときはサムネイルが付くようにしていました。

アイキャッチ画像がないときは、文字しか出ないというわけですね。ちょっと寂しいかな。

この部分のPHPはこんな感じ。

<h2>最近の記事</h2>
<ul id="recent">
<?php $posts = get_posts('numberposts=20'); ?>
<?php foreach($posts as $post): ?>
<li>
<span class="eye"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(40,40), array('class' => 'left')); ?></a></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

「the_post_thumbnail」関数でアイキャッチ画像を呼び出しています。

「もしアイキャッチ画像がないときは、あらかじめ指定しておいた画像が出るようにしたい。」ということで、以下のように改造してみました。

<h2>最近の記事</h2>
<ul id="recent">
<?php $posts = get_posts('numberposts=20'); ?>
<?php foreach($posts as $post): ?>
<li>
<span class="eye">
<?php if(has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(40,40), array('class' => 'left')); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no_thumb.jpg" alt="" width="40" height="40"></a>
<?php endif; ?>
</span>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

「if(has_post_thumbnail()」で条件分岐させ、「もしアイキャッチ画像があるときは、アイキャッチ画像を表示する。そうでないときはno_thumb.jpgを表示する。」としてみました。

こんなふうに表示されるようになりました。

文字の頭が揃って、ちょっと整った感じがしますネ。

ちょっと味気ない画像なので、そのうち変えるかもしれませんが、当分はこのままで。

人気のある記事を表示するプラグイン「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。

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

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

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

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

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

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

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

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

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

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

• 簡単に4択クイズプログラムを作ってみよう
• ランダムに広告(文章)を表示する方法

さて、仕様としては、

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

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

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

ふだんはあまりセンタリングしないのですが、どうしても画面のど真ん中に文字を配置したくなって、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書いたかな。うーん、全然覚えてない。