WordPressで、アイキャッチ画像がないときは指定した画像を表示させる。

2019年09月21日 正午の月齢:22.1  月名:弓張月(下弦)  潮汐:小潮 月齢:22.1[弓張月(下弦)] 潮汐:小潮 旧暦:2019年08月23日 赤口
1日前に投稿 | WordPress | コメントはありません

4分ぐらいで読めます。

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

アイキャッチ改造前

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

この部分の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を表示する。」としてみました。

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

アイキャッチ改造後

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

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

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

2019年09月19日 正午の月齢:20.1  月名:二十日余の月  潮汐:中潮 月齢:20.1[二十日余の月] 潮汐:中潮 旧暦:2019年08月21日 仏滅
3日前に投稿 | 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日 友引
5日前に投稿 | 分類無用 | コメントはありません

1分ぐらいで読めます。

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

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

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

2019年09月15日 正午の月齢:16.1  月名:立待月  潮汐:大潮 月齢:16.1[立待月] 潮汐:大潮 旧暦:2019年08月17日 赤口
1週間前に投稿 | 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日 仏滅
1週間前に投稿 | ウェブ・IT関係 | コメントはありません

10分ぐらいで読めます。

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

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

さて、仕様としては、

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

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

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

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

2019年09月11日 正午の月齢:12.1  月名:十三夜  潮汐:中潮 月齢:12.1[十三夜] 潮汐:中潮 (最終更新日:2019年09月16日) 旧暦:2019年08月13日 友引
2週間前に投稿 | ウェブ・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書いたかな。うーん、全然覚えてない。

Translate »