Cocoonのカスタマイズをプラグイン化

Cocoon でカスタマイズを行う際、 多くの方が子テーマの Cocoon Child 内の style.css 、 javascript.js 、 functions.php などに記述を追加されていると思います。

しかし、 カスタマイズを重かさねていくと、 当然ながら記述量も嵩かさんでいきます。 そんな状態ですと、 カスタマイズに変更・修正を加える際に、 何処どこへ記述したかを探すのがとても億劫おっくうになります。

そこで、 カスタマイズの内容を分別し、 その機能毎ごとにプラグイン化すると、 整理整頓がとても捗はかどります。

「プラグイン」 と聞くと敷居が高そうですが、 カンタンなものならホントにカンタンに作れます。

スポンサーリンク

１ファイルで作るプラグイン

ではまずカンタンなものから。

以前の記事で、 引用符などが WordPress に自動変換される機能を解除するカスタマイズを行いましたが、 これをプラグイン化します。

thx-remove-texturize.php 

 <?php 
 /* 
 Plugin Name: thx.jp/ Remove Texturize 
 Plugin URI: 
 Description:  引用符解除
 Version: 0.0.1 
 Author:Gackey.21 
 Author URI: https://thx.jp 
 License: GPL2 
 */ 
 ?> 
 <?php if ( ! defined( 'ABSPATH' ) ) exit; ?> 
 <?php 
 remove_filter("the_content", "wptexturize"); 
 remove_filter("the_excerpt", "wptexturize"); 
 remove_filter("the_title", "wptexturize");

はい、 これだけです。 実際の機能としては下から３行のみです。 

 <?php 
 /* 
 Plugin Name: thx.jp/ Remove Texturize 
 Plugin URI: 
 Description:  引用符解除
 Version: 0.0.1 
 Author:Gackey.21 
 Author URI: https://thx.jp 
 License: GPL2 
 */ 
 ?> 
 <?php 
 /*  Copyright 2019 Gackey.21 (email : gackey.21@gmail.com) 

		 This program is free software; you can redistribute it and/or modify 
		 it under the terms of the GNU General Public License, version 2, as 
		  published by the Free Software Foundation. 

		 This program is distributed in the hope that it will be useful, 
		 but WITHOUT ANY WARRANTY; without even the implied warranty of 
		 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
		 GNU General Public License for more details. 

		 You should have received a copy of the GNU General Public License 
		 along with this program; if not, write to the Free Software 
		 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA 
 */ 
 ?> 
 <?php if ( ! defined( 'ABSPATH' ) ) exit; ?> 
 <?php 
 remove_filter("the_content", "wptexturize"); 
 remove_filter("the_excerpt", "wptexturize"); 
 remove_filter("the_title", "wptexturize");

この様な記述をしたファイルを、 例えば thx-remove-texturize.php と名前を付け、 WordPress の plugins フォルダへコピーするだけで

登録されたプラグイン
登録されたプラグイン

この様にプラグイン画面に表示されます。 もちろん、 停止・有効化も可能です。

ちなみに、 こちらに表示される文面の内容は、 thx-remove-texturize.php 内の冒頭部、 

 <?php 
 /* 
 Plugin Name: thx.jp/ Remove Texturize 
 Plugin URI: 
 Description:  引用符解除
 Version: 0.0.1 
 Author:Gackey.21 
 Author URI: https://thx.jp 
 License: GPL2 
 */ 
 ?>

にて指定された内容が表示されます。

plugins フォルダへコピー

plugins フォルダへのコピー方法は FTP などが手っ取り早いのですが、 管理画面からのアップロードも可能です。

プラグインの新規追加
「新規追加」 をクリック

管理画面 → プラグインから 「新規追加」 をクリックします。

プラグインのアップロード
「プラグインのアップロード」 をクリック

「プラグインを追加」 画面に移りますので、 「プラグインのアップロード」 をクリックします。

アップロードダイアログ
アップロードのダイアログ

アップロードのダイアログ画面が表示されます。

ファイルをドラッグ＆ドロップ
ファイルをドラッグ＆ドロップ

ファイルをドラッグ＆ドロップで完了です。

洋服 折りたたみボード
posted with カエレバ
楽天市場
Amazon
Yahoo!
7net
掛け軸専用タンス
posted with カエレバ
楽天市場
Amazon
Yahoo!
7net

スタイルシートをプラグイン化

続いては、 自作スタイルシート （css） のプラグイン化です。

私の様なカスタマイズ初心者は、 まずスタイルシートのカスタマイズから手を付ける方が多いのではないでしょうか？ php や jQuery などよりは敷居も低いですしね。

で、 私自身がそうなのですが、 カスタマイズを重ねることによって、 css がどんどん肥大化していくんですよね ｗ

そうすると、 以前に施ほどこしたカスタマイズに変更を加えたい際に、 どこへ記述したかを探すのに嫌気がさします ｗ （そもそも探すという行為が大嫌いです ｗ）

そこでプラグイン化です。 プラグインになっていれば探す場所は明白ですし、 何よりカンタンに 「停止」 する事もできますしね。 オススメです。

今回はサンプルとして、 当サイトの見出し （<h2> 〜 <h6>） に表示されているカウンターのスタイルシートをプラグイン化します。

thx-counted-heading

プラグインのフォルダ構成
  • thx-counted-heading
    • thx-counted-heading.php
    • thx-counted-heading.css

フォルダ 「thx-counted-heading」 の中に、 「thx-counted-heading.php」 と 「thx-counted-heading.css」 の２つのファイルを準備します。

thx-counted-heading.php 

 <?php 
 /* 
 Plugin Name: thx.jp/ Counted Heading 
 Plugin URI: 
 Description: h2-h6 にカウンターを表示する
 Version: 0.0.1 
 Author:Gackey.21 
 Author URI: https://thx.jp 
 License: GPL2 
 */ 
 ?> 
 <?php if ( !defined( 'ABSPATH' ) ) exit; ?> 
 <?php 
 if ( !class_exists('thx_Counted_Heading') ) { 
	 class thx_Counted_Heading { 
		 public function __construct() { 
			 add_action(//css のファイル出力用フック
				 'wp_enqueue_scripts', 
				 array( $this, 'enqueue_styles' ) 
			 ); 
			 add_filter(//css の amp インライン出力用フック
				 'amp_all_css', 
				 array( $this, 'echo_amp_css' ) 
			 ); 
		 }//__construct() 

		 public function enqueue_styles() {// ファイル出力用の css ファイルを選択
			 wp_enqueue_style('thx-counted-heading', plugins_url( 'thx-counted-heading.css', __FILE__ )); 
		 } 

		 public function echo_amp_css($css) {//amp インライン出力用の css ファイルを選択
			 $css_url = plugins_url( 'thx-counted-heading.css', __FILE__ ); 
			 $css .= css_url_to_css_minify_code($css_url); 
			 echo $css; 
		 } 
	 }//class thx_Counted_Heading 
 }//!class_exists('thx_Counted_Heading') 

 new thx_Counted_Heading();

今まで css しか触っていない方はココで拒否反応が出るかもしれませんが、 ダイジョウブです。 カンタンです。 設定箇所は主に３つです。

ヘッダー部

 <?php 
 /* 
 Plugin Name: thx.jp/ Counted Heading 
 Plugin URI: 
 Description: h2-h6 にカウンターを表示する
 Version: 0.0.1 
 Author:Gackey.21 
 Author URI: https://thx.jp 
 License: GPL2 
 */ 
 ?>

まずはヘッダー部の設定です。

先ほど述べた通り、 ここの内容がプラグイン画面に表示されます。

お好みの内容に設定します。

クラス名

サンプルでは 「thx_Counted_Heading」 になります。 こちらは他のプラグインなどのクラス名とは重複できないので、 ユニークな名前が必要になります。

コメント部分を含めて全部で５箇所ありますので、 検索・置換します。

スタイルシート名

サンプルでは 「thx-counted-heading」 になります。 スタイルシートの拡張子を除いたファイル名になります。

全部で３箇所ありますので、 検索・置換します。

thx-counted-heading.css

日頃記述している style.css から該当する箇所をコピペします。

今回のサンプルではこの様な記述になります。 

 .article h2, 
 .article h3, 
 .article h4, 
 .article h5, 
 .article h6 { 
   position: relative; 
 } 

 .article h2::after, 
 .article h3::after, 
 .article h4::after, 
 .article h5::after, 
 .article h6::after { 
   position: absolute; 
   right: 4px; 
   bottom: 0px; 
   font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
   font-weight: 800; 
   line-height: 1em; 
   transition-duration: 0.3s; 
 } 

 .article h2:hover::after, 
 .article h3:hover::after, 
 .article h4:hover::after, 
 .article h5:hover::after, 
 .article h6:hover::after { 
   transition-duration: 0.3s; 
 } 

 .article h2 { 
   counter-increment: c-h2; 
   counter-reset: c-h3; 
 } 

 .article h3 { 
   counter-increment: c-h3; 
   counter-reset: c-h4; 
 } 

 .article h4 { 
   counter-increment: c-h4; 
   counter-reset: c-h5; 
 } 

 .article h5 { 
   counter-increment: c-h5; 
   counter-reset: c-h6; 
 } 

 .article h6 { 
   counter-increment: c-h6; 
   counter-reset: c-h7; 
 } 

 .article h2::after { 
   font-size: 4rem; 
   content: counter(c-h2) "."; 
 } 

 .article h3::after { 
   font-size: 3rem; 
   content: counter(c-h2) "-" counter(c-h3); 
 } 

 .article h4::after { 
   font-size: 2rem; 
   content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4); 
 } 

 .article h5::after { 
   font-size: 1.25rem; 
   content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4) "-" counter(c-h5); 
 } 

 .article h6::after { 
   font-size: 1rem; 
   content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4) "-" counter(c-h5) "-" counter(c-h6); 
 }

えー、 結構長いので折りたたんでおきます ｗ

こちらの記述にはカウンターのスタイル指定のみ記述している、 ってのがポイントですね。 プラグインを停止しても見出し自体の色指定や形状指定はそのまま表示されます。

plugins フォルダへコピー

FTP などで WordPress の plugins フォルダへ 「thx-counted-heading」 フォルダごとコピーするか、 「thx-counted-heading」 フォルダを zip 圧縮し、 前出の手順でアップロードすれば OK です。

まとめ

今回はカンタンなサンプルでしたが、 jQuery や php 関数などのカスタマイズもしている場合は抜群の効果を発揮します。

また、 プラグイン化、 つまり整理整頓をする事によって不要であった記述なども発見できますのでオススメです。

スポンサーリンク

コメント