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

・カテゴリー名が長くなって改行する場合は、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に設定するためにカスタマイズしました。
WordPressのプラグイン「estimated」で所要時間表示|Aoplanning
WordPressで所要時間を表示するプラグイン「estimated」。運営しているブログで設置する機会がありました。 なにやら設置しただけで滞在時間が向上するそうですが、やさしいユーザービリティのために設置することにしました。 今回は簡単...

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のカラーを変更することでサイトにあった色合いに。

PHP7.0に変更、古いプラグインを停止・削除

長らくPHP 5.4であったため速度向上のため、PHP7.0に変更(2018/8/20)しました。当初、エックスサーバで用意されている最新PHP7.1に切り替えたところ、WPのバージョンが古いため(WP4.6)エラーが表示されてしまいました。

PHP7.1はWordPress4.7からサポートされるようです。

従い、WP4.7については後日アップデートするとして、ひとまずWP4.6に対応したPHP7.0に切り替えることにしました。

またPHP7.0に切り替えるにあたっていくつかのプラグインが対応していないためエラーとなり、停止・削除することにしました。

現在アクティブにしているプラグインがPHP7.0以上に対応しているのかどうかは、「PHP Compatibility Checker」というプラグインを使ってチェックすることができるようです。

ただ私の場合はプラグインがうまく機能しませんでした。WPのバージョンに関係しているのかもしれません。

プラグインは使わずともこちらの方法である程度不具合のあるプラグインは究明することはできます。

エラーなどから判明した非対応プラグインはbrBrb(旧版)やSmart update pingerなどです。

brBrbはPHP7.0以上にも対応したものがでていた(まったくの別プラグインです)のでそちらをインストール、Smart update pingerはphp5.4に対応していないのが原因だったようで更新もされていないため、停止削除しました。

Smart update pingerは代わりのプラグインを探す予定です。

AmazonプラグインをCocoonのショートコードに一括変換

このブログも運営期間が長いため、Amazonアソシエイトのプラグインも更新されていないtmtk-amazonを使っており、はりかえるのも面倒だったこともあり、古い記事の中に残ったままになっていました。

PHP7.0にアップグレードするにあたって、エラーが表示されたため、重い腰をあげてCocoonにデフォルト機能であるAmazonアソシエイトのショートコードに変更することにしました。

ただ過去記事もすでに1000記事以上あるため、ひとつひとつ変更することはとても大変です。

そこで、プラグインの「Search Regex」を使って一括変換することにしました。

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

正規表現がよくわからなかったため、こちらの記事を参考に以下のような設定で一括返還することができました。

[tmkm-amazon]******[/tmkm-amazon]のショートコードをCocoonのデフォルトのコートである、amazon asin=”******”に変換します。※[]は省略。

一度に変更すると後戻りできないため慎重に少しずつまとめて変換しました。

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

尚、2018年春に長年使っていたSimplicity2より、同じ作者のCocoonにテーマを変更しました。無料ですが非常に高機能でコミュニティも充実しているため初心者にはぴったりのテーマです。

ブログカテゴリーを整理

長年ブログを運営しているとカテゴリーの設定ルールなどが曖昧だったこともあり、1000記事以上になるとまさにカオスな状態になっていました。

改めてプラグインなどを活用することで、カテゴリーを見直しました。

今後はアナリティクスを参考に、定期的に見直したいと思います。

カテゴリーの整理にあたり、以下の記事が参考になりました。

プラグインは定番のBatch Catを使い、事前に考えておいたカテゴリーに再編しました。

事前作業で記事リストをExcelでリスト化するにあたっては、WP CSV Exporterが便利です。

親カテゴリーと子カテゴリーの2つにとどめ、カテゴリーラベル表示については3つめのブログの記事が役立ちました。

(親・子になっていれば、親・子2つのラベルを記事に設定しなくてもよいとか・・・カテゴリーラベル表示に表示順のルールがあるとは知らなかった)

ウィジェットをショートコードで利用

こちらのブログで紹介されていた、「Widget Shortcode」というプラグインを利用しました。

本文中などで検索バーなどウィジェットで提供されている機能を表示したい時に便利です。

カテゴリー一覧ページに情報付加

カテゴリーの整理とあわせて、こちらの本をベースに、長年手をつけていなかったカテゴリページの充実をはかりました。

cocoonには便利な機能があるのでカスタマイズも楽々です。

またカテゴリー一覧をワンカラムにしました。

[https://wp-cocoon.com/community/customs/カテゴリーページをワンカラムにしたい/]

こちらのフォーラムでコードを教えていただき実装。
カテゴリ一覧のみ反映。

こちらのコードにすると、カテゴリ一覧・固定ページで反映。

レシピ数が多かったこともあり、これを機にカテゴリー分けでして、最低限の検索性をもたせました。

趣味の水耕栽培のページも固定ページで作成したような雰囲気に編集しました。

ブログ
自宅でも「おうち時間」を楽しく過ごす方法
  • 名作からヒット作品まで、映画やドラマも「見放題」
  • ビジネス書から漫画や雑誌も「読み放題」の読書体験!
  • お好みの音楽が200万曲の中から「聴き放題」

\今なら30日間無料体験/
Amazon Primeを見てみる

Amazonでお得に買物する方法

Amazonで少しでもお得に買い物をするなら、Amazonでの買い物に使える「Amazonギフト券」の購入チャージがオススメです。
通常会員は最大2.0% プライム会員は最大2.5%もポイントで還元されるので、Amazonで購入する前に現金チャージするとお得です。

この記事を書いたのは

dalahast_shikaku2

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
\ シェア /
\青丹よしのフォローはこちら/
dalahast.jp 週末限定ビストロパパの日常関心空間
テキストのコピーはできません。