テーマをCocoonに変更したのでカスタマイズやプラグインをまとめてみるよ

WordPress
この記事は約9分で読めます。

サーバー移転を機にテーマをCocoonに変更しました。

以前、わいひらさんという方のSimplicityというテーマを使っていましたが、Cocoonも同じわいひらさん作のテーマです。

スポンサーリンク

Cocoon+Seasonでプラグインやカスタマイズが最小限で済むよ

SANGO+PORIPUはとてもいいテーマなのですが、便利に使おうと思うとプラグインが増えていってしまうのが悩みでした。

また、内部リンクのデザインは好きなのですが、外部リンクを同じように表示しようとすると更にプラグインが増えてしまうというジレンマがあり、今回テーマを変える決心をしました。

Cocoonはスキンで簡単にデザインが変更できます

Cocoonに変えたきっかけはぽんひろさんのこのツイートがタイムラインに流れてきたから。

このツイートからぽんひろさんのサイトを見にいったときに、デザインがすごく好みで。

Cocoonでもこんなに可愛くできるんだと思ってすぐにCocoonに変更しました。

スキンはぽんひろさん作のSeason(シーズン)。

Spring、Summer、Autumn、Winterの4つのスキンが用意されているので、季節ごとにスキンを変えて行こうと思っています。

functions.phpに追記したもの

テーマの機能でほとんどの事ができてしまうので、functions.phpに追記したのは下記の2つのみです。

検索結果にサムネイルを表示させる

上記エントリーを参考に検索結果にサムネイルが表示されるようにしました。

管理画面に再利用ブロック管理画面のショートカットを表示する

SANGO+PORIPUのときはエディタをGutenbergにするとプラグインを増やさないといけなかったり、逆にいままで便利に使えていたプラグインが使えなかったりと、とても便利に使える状況ではありませんでした。

下記エントリーが参考になります。

Cocoonはテーマの機能だけでGutenbergがとても便利に使えるので、AddQuicktagを削除し再利用可能ブロックを多用しています。

管理画面のサイドバーに再利用可能ブロックの管理メニューのショートカットを作成することにより、更に便利に使えるようになりました。

style.cssに追記したもの

フッターメニューの仕切り線を消す

スマホで見たときにフッターメニューの仕切り線が気になったので、下記を参考に非表示にしました。

コメントフォームからメールアドレスやウェブサイト欄を消す

上記エントリーを参考にコメントフォームに名前とコメント欄のみが表示されるようにしました。

アプリーチ新コード用

引き続き3のデザインを使用しています。

SANGOのときは枠を二重線にしていましたが、Cocoonでは商品リンクのデザインにあわせて手直しなしです。

イタリック体をノーマルに戻す

イタリック体がとにかく嫌いなので、引用とソースコードのコメントの表示をノーマルに戻しています。

cite, .hljs-comment {
    font-style: normal;
}

その他カスタマイズ

404ページのカスタマイズ

Cocoonでは404ページ用の設定やウィジェットエリアが用意されているので、簡単にカスタマイズができるようになっています。

下記エントリーを参考にカスタマイズしました。

出来上がりはこちら

サイトマップをショートコード1つで表示させる

Cocoonではショートコード1つでサイトマップが作れます。

エントリーが少ないうちはこれで充分です。

Amazon商品リンクに自由ボタンを表示させる

Rinkerと同じようにCocoonの商品リンクでも自由ボタンを2つ追加できます。

商品リンクはブックマークレットで簡単に作れるので、自由ボタンの部分をChromeの拡張機能で作成し追記しています。

商品リンクはCocoonのテンプレート機能を使えば商品名で管理・検索ができるため、Rinkerは削除しCocoonの商品リンクに1本化しました。

お問い合わせフォームをプラグインを使わず実装する

上記エントリーのフォームをCocoon用に手直ししたのが下記エントリーです。

ありがたくそのまま使わせていただいています。

テスト送信してみましたが、文字化けもなく動作しています。

使用しているプラグイン

Async JavaScript

Javascriptを非同期もしくは遅延読み込みすることによって、コンテンツをレンダリングする際に妨げとなっているJavascriptを排除してくれます。

下記エントリーを参考に設定しました。

Code Snippets

functions.phpのコードを管理できるプラグイン。

このプラグインを導入すると、テーマのアップデートのたびにfunctions.phpを書き換える必要がなくなります。

また、コードを項目ごとに追加できるので、機能のONOFFが簡単にできて便利です。

使い方は下記のエントリーが参考になります。

Edit Author Slug

管理者(または資格のあるユーザー)がユーザーのauthor slugの編集やAuthor Baseの変更ができるプラグイン。

訪問者にユーザーIDが表示されるのを防いでくれるので、セキュリティ強化にもつながります。

ゆうこりんさんの記事がわかりやすいです。

Google XML Sitemaps

Google、Bing、Yahooなどの検索エンジンがサイトのインデックスを作成するためのXMLサイトマップを作成し、送信してくれるプラグイン。

サルワカさんの記事がわかりやすいです。

Imagify

画像を圧縮してくれるプラグイン。

設定で大きいサイズの画像をアップロードしたときにリサイズもしてくれます。

EWWW Image Optimizerから乗り換えました。

Invisible reCaptcha

Googleの新しいInvisible reCaptchaとWordPressサイトを統合する非常に強力なプラグイン。

Quicklink for WordPress

有効化するだけでページの読み込みを早くしてくれるプラグイン。

下記エントリーが詳しいです。

WP-Optimize

データベースを簡単かつ安全に最適化してくれるプラグイン。

下記エントリーを参考に設定しました。

最後に

Cocoonに変えてからプラグインが8つまで減りました。

テーマ変更による表示崩れを直すのに時間がかかりましたが、Gutenbergの使い勝手もいいですし、Cocoon独自の便利機能のおかげで修正も苦になりませんでした。

1年ほどブログを更新できていませんでしたが、これからまた少しずつ更新していきたいと思いますので、どうぞよろしくお願いいたします。

コメント

タイトルとURLをコピーしました