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

SNSアイコンテスト
この記事の所要時間: 522

wordpress_thumb.png

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

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

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

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

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

スポンサーリンク

Simplictyカスタマイズリスト

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

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

このカスタマイズをするためには、完全レスポンシブデザインにするを「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)に以下をコピペで追記します。

・カテゴリー名が長くなって改行する場合は、width:の値を大きくすることで修正可能。
・文字の大きさはfont-size、背景色はbackground-colorで変更可能。

こちら参考になったひがしさん(@Plus_A_Blog)の記事です。

グローバルナビを常に上部にスクロール表示

グローバルメニューを常に上部に固定して表示させるカスタマイズです。
参考になったのはこちらのブログ記事です。

子テーマのスタイルシート(css)にコピペするだけで実装できます。

最終的に試行錯誤の結果、こちらのカスタマイズの方がうまくいきました(2017/01/07) ⇒ さらに変更。

※2017/1/7追記

結局Clingifyを使って実装しました。

ひとまず現時点の追加カスタマイズの記録となります。

スポンサーリンク
SNSアイコンテスト
この記事をお届けした
dalahast.jp 週末限定ビストロパパの日常関心空間の最新ニュース情報を、
いいねしてチェックしよう!
この記事を書いたのは

この記事を書いたのは

dalahast_shikaku2

dalahast(ダーラヘスト; @dalahastjp)です。ほぼ週末限定の趣味のお料理以外に日々の暮らしのなかで興味をもったこと等を 気の向くままに徒然に綴っています。
詳しいプロフィールはこちら

スポンサーリンク

このサイトをフォローする