WordPressでSTINGER3の子テンプレートを作成する

今までは、直接STINGER3テンプレートを修正していたんだけど、どうやら直接編集しないほうが良いようなんだ。
なぜかというと、バージョンをアップデートしたときにせっかく修正したものが消えてしまうそうなんだよ。
イメージ的には親クラス（STINGER3）を継承してオリジナルのサブクラスを生成するような感じだね。

新しいテンプレートを作成する

1. 以下のディレクトリ配下に、新しくSTINGER3を継承して作成するテンプレート名のディレクトリを作成する。

   /home/【ドメイン名】/www/【wordpressインストールディレクトリ】/wp-content/themes/【新しいテンプレート名】

   ちなみに僕は「stinger3-child」ってディレクトリを作成したよ。
2. 以下の内容で「style.css」ってファイルを作成してね。

   /*
   Theme Name: 【フォルダ名に同じ】
   Template: stinger3verYYYYMMDD
   */
   @import url('../stinger3verYYYYMMDD/style.css');
   

   ちなみに「YYYYMMDD」はインストール済みのSTINGER3のバージョンと同じにしてね。
   ちなみに僕の場合はこんな感じ･･･

   /*
   Theme Name: stinger3-child
   Template: stinger3ver20140327
   */
   @import url('../stinger3ver20140327/style.css');
   

3. 保存したら新しく作成したフォルダにアップロードするよ。
4. WordPressのダッシュボードの左メニューから「外観」→「テーマ」をクリックしてね。
5. 新しく作成したテーマが表示されていることを確認して、「有効化」ボタンをクリックしてね。

各種設定の復旧

テンプレートが切り替わると色々と設定が元に戻ったりするよ。
僕が覚えている（経験した）範囲で、あげておくね。

• ヘッダー画像
• ナビゲーション

（僕の場合は「外観」→「カスタマイズ」の範囲で設定できるものばかりだったよ）

修正の移行

僕の場合の新しく作成したstyle.cssの内容をあげておくね。

/*
Theme Name: stinger3-child
Template: stinger3ver20140327
*/
@import url('../stinger3ver20140327/style.css');

p {
	font-size: 15px;
	line-height: 27px;
	margin-bottom: 20px;
	text-indent: 1em;
}

h2 {
	font-size: 24px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 75px;
	color: #000;
	line-height: 30px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -65px;
	background-image: url(images/cah2-b.png);
	background-repeat: no-repeat;
	background-position: left top;
	border-left-style: hidden;
}

.kizi h3 {
	font-size: 20px;
	margin-bottom: 5px;
	margin-top: 10px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 60px;
	color: #000000;
	line-height: 30px;
	background-image: url(images/cah3-bl.png);
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}

/*----------------------------
引用
-----------------------------*/
.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 40px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 40px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: -40px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}

/*追記*/
#menu-navmenu li{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
#menu-navmenu li a{
    display: block;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#menu-navmenu li ul{
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 250%;
    margin: 0;
    padding: 0;
    z-index: 1;
}
#menu-navmenu li ul li{
    overflow: hidden;
    height:0;
    margin: 0;
    padding: 0;
}
#menu-navmenu li ul li a{
    text-align:left;
}
#menu-navmenu li:hover ul li{
    overflow: visible;
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #f8f8f8;
    border:1px #ccc dotted;
    z-index: 0;
}

内容は以下の通りだよ。

• <p>タグの１文字字下げ
• <h2>タグの見た目変更
• <h3>タグの見た目変更
• 引用の見た目変更
• メニューのドロップダウン化

イメージはSTINGER3のバージョンアップで無くなることが想定されるので、ディレクトリごとコピーしたよ。

参考サイト

Sakihaya.com | 杉山早のブログ - Stinger3カスタマイズ記録―子テーマを作成するには？