【お得】Amazonギフト券をチャージするとポイント還元 >>

【備忘録メモ】 Simplicty WordPressカスタマイズ(Simplicty&Cocoon)

 

wordpress_thumb.png

もう3年ほど活用させていただいている、わいひらさんが開発したWordpress用の純国産の無料テーマ、「Simplicty」。

私のようなWordpress初心者でもデフォルトのウィジェットを活用することで、サイトに必要な機能を簡単に実装できるところが最大の魅力のテーマです。

また国内では広く使われているテンプレートなので、簡単にカスタマイズできる術を公開している方も多く、ほとんどコピーペーストにてやりたいようにデザインできるのも良いところです。

今回、自分用の備忘録として現在カスタマイズしたポイントをリストとして列挙していきます。

※このページは随時カスタマイズするごとにアップデートしていく予定です。

<Simplicityカスタマイズリスト>

記事一覧サムネイル画像を大きく長方形にカスタマイズする

こちら参考にしたもん吉さんの記事です。

このカスタマイズをするためには、完全レスポンシブデザインにするを「OFF」に、 一覧(インデックス)ページの表示スタイル設定を「エントリーカード(デフォルト)」にしておく必要があります。

子テーマにあるfunctions.phpに以下コードを追加します。

デザインは子テーマにあるstyle.cssに追加します。

最後にサムネイル画像を調整するために、  プラグイン「Regenerate Thumbnails」を実行して、終了!

カテゴリ別新着記事をヘッダー下に表示する

TOPページの記事リスト上段にカテゴリ毎の最新記事をタイル状に5つ並べる方法。

PC向けページ限定です。

モバイルは表示させていませんが、スライダーなどのプラグインを使って実装する方法もあると思います。

参考にしたのはこちらの記事です。

コーピーペーストで簡単実装できます。

コード中のスラッグ名、カテゴリ名は各自のサイトのものに置き換えます。

Simplicity 2.4の場合は、子テーマの中にある「before-main.php」に以下コードをコピペするだけです。

あとはレイアウトをstyle.cssで調整します。

もちろん、こちらも子テーマ側のstyle.cssに追加します。

このコードは本当に感謝してます。

スマホ表示にグローバルナビを設置するカスタマイズ

Simplicityにはスマホ用にデフォルトで3つのグローバルメニュー表示が用意されていますが、わざわざメニューをクリックする必要があるためPCと同じく見た目ですぐにわかるメニューをつけるカスタマイズです。

タイトル下に表示範囲内で自分の好みのカテゴリーなどをメニューとして表示します。

子テーマの「before-main.php」に以下コードを追加します。

次に子テーマのスタイルシート(css)に以下ソースをコピペで追記します。

以下、色などの変更について。

・5行目のbackground-colorでメニュー部分の背景の色を変更。

・6行目のpaddingはメニューの背景の範囲(文字からどのくらいの距離まで背景をつけるか)とメニューとメニューの間隔を調整。

・7行目のline-heightは、2行以上になるときの行間。

・9行目のborder-radiusは、メニュー背景の角の丸みを調整。

・12行目のColorでメニューの文字色の変更。

まだ試行錯誤の最中ですので変更する可能性はあります。

上記方法だと表示領域が限られるのでPCと同じメニューが表示されるわけではありません。

今後はスライダー方式でメニューをPCと同じ項目数を表示させることを検討中です。

モバイル表示時に横スクロールできるグローバルメニューを設置

スマホで表示されるメニューをPC同様に表示し、横スライドで選択できるようにするカスタマイズです。

子テーマの「before-main.php」に以下をコピペで追記します。

次に子テーマのスタイルシート(css)に以下をコピペで追記します。