【補足】WordPressテーマ「Minimal」のカスタマイズ

WORK

マナブさんのブログのデザインがとても見やすくて、マナブさんが製作したWordpressのテーマ「Minimal」を購入しました。

 

シンプルでとても気に入っているのですが、初期設定やカスタマイズにHTMLやCSSの知識がいるので初心者には少しハードルが高めです。

私も初心者なので少し苦労しています。

Minimalをもっとマナブさんのブログのデザインに近づけようとすると、以下の記事がカスタマイズの参考になります。

 

ここでは、それでも初心者の僕がハマってしまった箇所についてまとめます。

TOPページだけに3カラムのナビゲーションを追加する

3カラムのナビゲーションはこれです。

基本的なやり方は、以下のリンクのようにやればできました。

【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】

他の方の記事にも3カラムのナビゲーションに関するソースコードがありましたが、safariで読み込むと表示がズレました。

現在(2019年10月)は、上記の記事が良さそうです。

サイドバーによく読まれる記事を表示する

こちらも下記の記事を参考にするとできました。ただ、表示に関して一点だけ補足。

【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】

サムネイル画像のサイズがMinimalの標準より細長くなってしまいました。

こんな感じ。

これは、Sidebar.phpを編集に追加したコードの以下の部分が原因です。

<div class="col-xs-12 popular text-center">

popularをstyle.cssで定義すればいいんだと思いますが、ここでは「最新の投稿」と見た目を同じにしたかったので、popularをあらかじめ定義されているrecentに書き換えました。

<div class="col-xs-12 recent text-center">

すると、こんな感じでサムネイル画像が最新の投稿と同じサイズになりました。

twitterタイムラインを表示させる

これです。

以下のサイトを参考にfooter.phpを編集しましたが、なぜか僕の環境では表示されませんでした。

そこでfooter.phpの以下の部分を

<a class="twitter-timeline"  href="https://twitter.com/brewojisan"  data-widget-id="302814657645789185">Tweets by brewojisan</a>

次のように変更したところうまくいきました。

<a class="twitter-timeline" href="https://twitter.com/brewojisan">Tweets by brewojisan</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

参考サイト

 

他にもカスタマイズしたら、つど追記していきますね。それでは。