WordPress公式テーマの拡張!子テーマを作成する!


WordPressには、とても素晴らしくカッコイイ公式テーマが沢山あります。
公式テーマは、出所がはっきりしている上に、セキュリティ上の問題など、
常にアップデートが繰り返され、安全に扱えるように品質を保っています。

そんな公式テーマを拡張して新しいテーマを作成したい方も多いのではないでしょうか?
拡張方法としては、大きく分けて三つの方法があります。


  • 公式テーマのソースコードを直接修正し、改変を加える
  • 公式テーマの内容をそのまま複製し、名前だけ変えた後に改変を加える
  • 公式テーマの子テーマを作成し、修正を加えたい箇所のみ改変したコードで上書きさせる


公式テーマのソースコードを直接修正し、改変を加える

一番簡単で、直ぐに思いつく方法ですが、公式テーマはアップデートが繰り返されているため、
バージョンアップを適用すると公式テーマは上書きされてしまいますので、
せっかく行った拡張が破棄されてしまいますので、注意が必要です。

公式テーマの内容をそのまま複製し、名前だけ変えた後に改変を加える

公式テーマの内容を複製したとしても、
異なるテーマとなる為、公式テーマのバージョンアップに対応出来ません。
バージョンアップを怠ると、セキュリティホール等の管理は自分で行う必要があり、
維持していくのは大変です。

公式テーマの子テーマを作成し、修正を加えたい箇所のみ改変したコードで上書きさせる

今回解説する方法です。公式テーマの子テーマとした位置づけで新たにテーマを作成し、
公式テーマに対して変更を加えたいファイルのみ用意して改変を加える事で、
公式テーマを部分的に上書きします。
元の公式テーマへは手を加えないため、公式テーマのアップデートによって
拡張した部分が破棄される事も無く、公式テーマのアップデートは行われますので、
品質も保たれます。

それでは早速、子テーマの作成方法をみてみましょう。


  1. 子テーマを作成する
  2. 子テーマを適用する


子テーマを作成する


子テーマの作成方法はとても簡単です。
まずは子テーマを構築するディレクトリを作成しましょう。
作成する場所は下記の通りです。


wordpress\wp-content\themes\


上記の場所には、すでにいくつかの公式テーマが置かれているかと思います。
こちらがWordPressのテーマを格納しておくディレクトリです。

他のテーマと同様に、子テーマ様のディレクトリも作成してみましょう。
今回は『sample』という子テーマを作成します。

wordpress\wp-content\themes\sample

上記のディレクトリを作成しましたら、その中に『style.css』を作成しましょう。
『style.css』には下記の様に記述します。


/*
Theme Name: 子テーマのディレクトリ名
Template: 親テーマのディレクトリ名
*/


初めに、コメントアウト内にて最低限二つの宣言を行う必要があります。


Theme Name

子テーマのディレクトリ名を指定します。

Template

親テーマのディレクトリ名を指定します


上記の内容を記述すると、例えば下記の様になるでしょう。


/*
Theme Name: sample
Template: twentyfourteen
*/


今回は、『twentyfourteen』という公式テーマの子テーマとして『sample』というテーマを作成します。
また、このままではCSSが空の状態で上書きされてしまいますので、
親のテーマのCSSを残したい場合は、『@import』句にて、親テーマのCSSを読み込みましょう。


/*
Theme Name: sample
Template: twentyfourteen
*/
@import url('../twentyfourteen/style.css');



後は続けてCSSを記述して行けば、親テーマの内容を子テーマとして拡張する事が出来ます。

これで子テーマが作成されました。
後は、公式テーマ内と同じファイル名を配置し、内容を記述すれば公式テーマ内の変わりに、
子テーマ内にあるファイルが読み込まれます。
結果的に、実装が上書きされていう様に振舞う事が出来ます。


子テーマを適用する


作成した子テーマは、そのままでは適用されません。
子テーマは、親のテーマを拡張していますが、立派なテーマです。
ですので、WordPressの管理画面から、子テーマとして作成したテーマを
概観として設定する必要があります。

場所は、WordPressの管理画面内のメニューより、『概観』を選択し、『テーマ』ページへ遷移します。
『テーマ』ページには、現在読み込む事の出来るテーマが並んでいます。

その中から、先程作成した子テーマ『sample』を選択し、『有効化』させて下さい。
これで親テーマを拡張した子テーマがテーマとして有効になります。



この子テーマという概念は、公式テーマだけに留まらず、
独自に作成したテーマに対しても使える手法です。

なれてくると、ある程度の雛形としてテーマを作成しておき、
詳細な内容によって子テーマを作成すると効率が良く、作業時間を圧縮できるかと思います。

また、WordPressの改修案件があった場合に、元のソースに手を加える事無く機能拡張出来ますので、
とりあえず子テーマとして実装し、必要あらば元のソースにマージするといった進め方も可能です。

この子テーマを知っていると、普段の業務の幅が広がるかと思いますので、
是非とも身に付けておいて下さいね。


コメントをお待ちしています

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)