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

この記事の所要時間: 1244

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)に以下をコピペで追記します。

・カテゴリー名が長くなって改行する場合は、width:の値を大きくすることで修正可能。

・文字の大きさはfont-size、背景色はbackground-colorで変更可能。

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

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

グローバルメニューを常に上部に固定して表示させるカスタマイズです。

参考になったのはこちらのブログ記事です。

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

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

※2017/1/7追記

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

本文記事の複数のh2見出し前にAdsenseを表示

Simplicityはよくできたテーマで広告ウィジェットを使えばh2前にAdsenseを表示できます。

しかしながら、1つしか表示できないため複数のh2の見出し前にAdsenseを表示するためにカスタマイズを行いました。子テーマのfunctions.phpに追記するだけです。

もちろんバックアップも忘れずに!

参考にしたのはこちらの記事とフォーラムの書き込みです。

こちらの基本コードに下のフォーラムのカスタマイズ部分を反映してみました。

基本コードはこちら。

こちらをベースに下記のようにカスタマイズしています。

1つ目のh2見出し前の広告は、Simplicity標準の広告ウィジェット(h2見出し前用)を使っているので、2つ目のh2と3つ目のh2の見出し前に広告を表示させるコードになります。

ちなみに広告除外を設定している記事は「is_ads_visible()」を条件分岐に使えば制御できるようです。こちらを使ってカスタマイズしたコードがこちらです。

また念のためスポンサーリンク表示を中央にくるように調整してラベルをつけています。

最終的にPC向けとモバイル向け制御をいれたコードがこちら。

アドセンスも複数取得しておくと、どの場所のh2見出し前がクリックされるのかなど効果測定が可能となります。

※2017/9/2追記

h2の見出し判定が上記コードの場合、うまくいかず広告が表示されないサイトがありました。

こちらに書き換えることで無事表示です。Simplicityの上記スレッドでも対策として(同じ見出しを使わない前提)紹介されています。

最終的なコードはこちら。

記事を読む時間表示プラグイン修正(固定ページに表示しない)

記事を読む時間の表示についてはestmatedのプラグインを使っています。 ほかにも設定がいろいろできるInsert Estimated Reading Timeもありますが、estimatedを固定ページで表示しないように下記記事を参考にプラグインを編集しています。 プラグインがアップデートすると消えてしまうため、あくまでも暫定処置で、後々Insert Estimated Reading Timeに乗り換える予定です。 固定ページをHOMEに設定するためにカスタマイズしました。

TOPページを2カラム化して見やすくする

HOMEの固定ページを作成し、2カラム化を行いました。

2カラム化はこちらの記事を参考にSimplicityの装飾スタイルを活用しています。

通常「Page Builder by SiteOrigin」などのプラグインを使えば、簡単にレイアウトができるのですが、Simplicityとの相性があまりよくなく、挙動がおかしくなるため使っていません。

またプラグインを使うと重くなるため、せっかくSimplicityを使うのであればこちらのコードを使えば簡単に実装できてしまいます。

参考までにPage Builderを使っている記事はこちら。プラグインのNewpost Catchも併用します。

ちなみにこちらが本サイトのソースです。

Newpost Catchのプラグインのショートコード[npc★]でカテゴリの最新記事を表示しています。※実際のショートコードは★を取ります。

人気記事はWP Popular Postのショートコードを使って表示していますが、このままだとレイアウトがやや崩れるのでNewpost Catchの見た目をcssで調整して、WP Popular Postのレイアウトに合わせるようにしています。

あとはランキング数字を表示、そして各カテゴリー一覧のページも同様に見やすく改修していきたいと考えています。

Simplicityのバイラルタイプのシェアボタンを均等に横一列にする方法

SimplicityのSNSアイコンを幅にあわせて均等表示する方法です。

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

事前にカスタマイズ→SNSでバイラルタイプに設定しておきます。

次のコードをスタイルシート (style.cssとmobile.css)にコピーペーストします。

SNSアイコンに表示される名前も消すことができます。

Simplicityの固定TOPページを3カラム化

ずっとカスタマイズしたかったTOPページのレイアウトをポータルぽく視認性よい3カラムへ変更しました。

参考にしたのはSimplicityのフォーラムにあった書き込みです。

こちらの記事の中でAkiraさんのコードを参考にカスマイズを実行。

固定ページに「テキスト」モードで記入するHTMLはこちら。

次にスタイルシ-ト(css)に記入するコードはこちら。

幅はサイトごとに調整すれば、現在dalahast.jpと同じような3カラム固定TOPページが完成します。

他の方法としては2カラムと同じようなコードを3カラム対応した次のコードが役立ちます。

HTMLはこちら。

スタイルシート(css)にはこちらを記入。

Meta SliderのCSSカスタマイズ方法

プラグインMetaSliderを使うと任意の記事を設定してお洒落なスライダーを簡単に作成することができます。基本は無料版で必要十分なのですが、見た目をcssでカスタマイズしてみました。

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

こちらの記事を参考にcssをコピーペーストしました。

dtしか使っていないのですが、キャプションを入力するところで、<dt>記事タイトル</dt>とすれば、文字の大きさや装飾などをイメージ通りに調整することができました。

TOC+ 目次をおしゃれにデザインカスタマイズする

WordPressの目次を表示するプラグインTOC+の見た目をカスタマイズします。

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

作者サイトのcssをそのままコピーペーストしているだけです。素晴らしいデザインなので気に入りました。^-^

TOC+が中央によるように位置合わせしています。

サイドバーにプロフィールcssカスタマイズ

サイドバーにcssカスタマイズをしてプロフィールを表示してみました。

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

こちらを参考に調整してみました。

Amazonjsカスタマイズ(テキスト追加)

Amazonアフィリエイトで使っているプラグインのAmazonjsの見た目もこちらの記事を参考にカスタマイズしました。

「Amazonでレビューをみる」のリンクかボタンをつけて、クリック率をあげる試みです。

現在は中止し、次のカスタマイズで様子をみています。

Amazonjsカスタマイズ(楽天リンクをつける)

Amazonjsのカスタマイズ(楽天リンクをつける)カスタマイズを実施しました。ボタン化と楽天リンクを追加できます(20171118)。

カスタマイズを実行することで見た目がこのようになり、カエレバ風のボタンがつきます。

見た目もよく気にいっています。カスタマイズはamazonjsのjsファイルを変更します。

見た目はamazonjsのamazonjs.cssを変更することで上のようなデザインになります。amazonjs_itemのカラーを変更することでサイトにあった色合いに。

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

スポンサーリンク
この記事を書いたのは

この記事を書いたのは

dalahast_shikaku2

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

宜しければフォローお願いします!
この記事をお届けした
dalahast.jp 週末限定ビストロパパの日常関心空間の最新ニュース情報を、
いいねしてチェックしよう!

宜しければこの記事をシェア御願いします!

スポンサーリンク