ワードプレスのサイドバーにサムネイル付き新着記事をプラグインなしで表示する方法

この記事は 3 分くらいで読めます
 

こんにちは。豆太です。

かっこいいブログには必ずと言っていいほど実装されている、サイドバーのサムネイル付きの新着記事表示(もしくはアクセスランキング)僕もさっそく設置してみたので、備忘録的に残しておきます。基本的にはコピペだけで簡単に設置できました。(参考にした記事

ちなみに、このブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしています。他のテーマにも応用可能です。

それでは、さっそく説明していきます。

スポンサーリンク

function.phpに記述するコード

以下のコードをfunction.phpに追記します。

ここで注意。function.phpはとてもデリケートなファイルです。少しでも不具合があるとブログだけでなく、ワードプレス管理画面にすらログインできなくなってしまいます。事前にバックアップを取っておくことを忘れないで下さい。

この複雑なコード、もちろん僕も全ては理解していません。なんてったってphp勉強し始めたばかりなので。とりあえず実装できたらいい!という方はこのまま貼りましょう。

当ブログの実際のCSSコード

これはどのカスタマイズにも共通することですが、見た目の調整を担当するのが「CSS」さんです。これも当ブログで実際に使っているコードです。

参照したコードをベースにして、いくつか変更を加えています。

ひとつめ。サイドバー内での位置を整えるために、.new-list li の margin を変更しました。margin はその要素の周囲の余白を整えることができる関数?コトバ?です。

今回は-20pxの「マイナスマージン」にすることで、ウィジェットをサイドバーの「ほぼ真ん中」に「力技で」置いてます。正攻法のプログラムはまだ書けなくても、こういう手段もある、ということを学びました。

ふたつめ。スマホ表示用の追記もしました。記事の抜粋を非表示、文字サイズと行間を変更、marginでスマホ用の位置調整。

@media screen and (max-width:599px){}  ← これは「画面サイズが599px以下の場合は以下の様に表示して下さい」という意味です。

ここらへんはそれぞれのサイトに合わせてお好みで調整してみて下さい。

管理画面からウィジェットを追加

ここまで来たらあとは設置するだけです。

外観 → ウィジェット と進んで

ウィジェットを追加して

ここでお好みの設定にします。これで完了です。ブラウザのキャッシュを消して再読み込みすれば、きっと上手く更新されているはずです。

まとめ

コピペだけでここまで実装できました。このブログのデザインは、コピペと微調整の繰り返しでした。その微調整の中で少しずつ疑問点を解消し、少しずつオリジナリティを出せるようになりました。皆さんもその第一歩として、導入してみて下さいね。改めて参照元の記事さん、ありがとうございました。

スポンサーリンク

.コメントをどうぞ