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

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

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

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

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

スポンサーリンク

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

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

以前の記事 引用符などが 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"); 

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

 <?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 などが手っ取り早いのですが 管理画面からのアップロードも可能です

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

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

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

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

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

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

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

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

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

続いては 自作スタイルシート 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 の2つのファイルを準備します

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 しか触っていない方はココで拒否反応が出るかもしれませんが ダイジョウブです カンタンです 設定箇所は主に3つです

ヘッダー部

 <?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 になります こちらは他のプラグインなどのクラス名とは重複できないので ユニークな名前が必要になります

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

スタイルシート名

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

全部で3箇所ありますので 検索 置換します

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 関数などのカスタマイズもしている場合は抜群の効果を発揮します

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

コメント