20160212

WordPressのテーマをカスタマイズした時に、いつまでもカスタマイズ前のテーマの名前が残るのは何となく嫌ですよね。

制作案件だとして、お客様にカスタマイズ前のテーマ名で納品するのも気が引けます。

そんな時にテーマ名を変更して納品する方法をお知らせいたします。

※ テーマの改変配布に当たりますので、カスタマイズ前のテーマの利用規約を必ずご覧ください。

 

テーマ情報を編集する

20160212_02

例として、Wordpressデフォルト無料テーマの「Twenty Thirteen」のテーマ名を編集していきます。

まずは、上記画像の赤字の部分を編集していきましょう。

こちらの情報は、Wordpress構成ファイル内の「style.css」の最上段に記述されています。

具体的には、「ドメイン/wp-content/themes/twentythirteen/style.css」という構成です。これはどのテーマでも同様です。

 

では、どのように記述されているか見てみましょう。

以下は、style.cssの冒頭です。赤字部分は実際には記述されていません。

/*
Theme Name: Twenty Thirteen　（テーマ名です）
Theme URI: https://wordpress.org/themes/twentythirteen/　（テーマ配布元情報です）
Author: the WordPress team　（テーマ作成者です）
Author URI: https://wordpress.org/　（テーマ作成者の情報です）
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.　（テーマ概要です）
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready　（テーマ検索時のタグ情報です）
Text Domain: twentythirteen　（テーマ名と同様と考えてOKです）

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.　（あっても無くてもOKです）
*/

では、以下のように記述を変更してみます。

/*
Theme Name: Cocoa Theme
Theme URI: http://cocoa-inc.jp
Author: Cocoa株式会社 クリエイティブチーム
Author URI: http://cocoa-inc.jp
Description: このテーマは、企業用サイト向けに作成されたテンプレ―トファイルです。見やすく、クールでレスポンシブ完全対応。
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 企業向け,コーポレート,シンプル,レスポンシブ
Text Domain: Cocoa Theme
*/

こんな感じで編集しました。さて、style.cssを上書きしてみましょう。

20160212_03

テーマ情報が変わったのがわかると思います。自作テーマっぽくなってきましたね。

次は、情報左のサムネイル画像を変更してみましょう。

このサムネイル画像は、「ドメイン/wp-content/themes/twentythirteen/screenshot.png」に保存されています。

差し替え用の画像を用意しましょう。

サイズは何でもいいのですが、デフォルトでは「880×660px」となっています。FTPソフトで置き換えてみましょう。

20160212_04

だいぶそれっぽくなりましたね！納品にも耐えられそうです。

しかし、これでは見た目を変更しただけで、構造上のテーマ名は「twentythirteen」のままです。

次はテーマディレクトリ名を変更しましょう。

 

テーマディレクトリ名を変更する

20160212_05

お手元のFTPソフト（なんでもいいです。画像はFFFTP）で、Wordpressがインストールされているディレクトリにアクセスします。

そして、「ドメイン/wp-content/themes/」にアクセスします。

そうすると、今回カスタマイズしたテーマがあると思います。（今回は「twentythirteen」。）

ここで直接ディレクトリ名を書き換えてしまいましょう。

20160212_06

こうなりましたね。

これでファイル名変更は完了です。Wordpress管理画面へ戻り、「外観＞テーマ」を選択してください。

20160212_07

変更前の「Twenty Thirteen」が破損扱いになっているので、改めて先ほど編集したテーマを選択し、「有効化」します。

自動的に「Twenty Thirteen」が消滅し、カスタマイズ完了です。

後は編集する必要はありません。

 

構造の複雑なテーマだったりするとエラーが起きることも

テーマ名がプログラムなどに活かされているケースや、画像へのリンクなどが「ウィジェット」などに直書きされているケースですと、テーマ名を変更した際にエラーが起きてしまうケースがあります。

テーマ名を変更した際に、ページのソースを表示し、旧テーマ名で検索をかけてみると良いでしょう。

重要そうな部分に前テーマ名の記述が残っていた場合は、しっかりと検証したほうが良いでしょう。

 

テーマを編集して、ぜひオリジナルのテンプレートを作成しましょう。

技術向上にも役立ちますし、自分のテーマが完成した時は達成感がありますよ！