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

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

== 新しいテンプレートを作成する ==
<ol>
<li>以下のディレクトリ配下に、新しくSTINGER3を継承して作成するテンプレート名のディレクトリを作成する。
<syntaxhighlight lang="text">/home/【ドメイン名】/www/【wordpressインストールディレクトリ】/wp-content/themes/【新しいテンプレート名】</syntaxhighlight>
ちなみに僕は「stinger3-child」ってディレクトリを作成したよ。</li>
<li>以下の内容で「style.css」ってファイルを作成してね。
<syntaxhighlight lang="css">
/*
Theme Name: 【フォルダ名に同じ】
Template: stinger3verYYYYMMDD
*/
@import url('../stinger3verYYYYMMDD/style.css');
</syntaxhighlight >
ちなみに「YYYYMMDD」はインストール済みのSTINGER3のバージョンと同じにしてね。<br/>ちなみに僕の場合はこんな感じ･･･
<syntaxhighlight lang="css">
/*
Theme Name: stinger3-child
Template: stinger3ver20140327
*/
@import url('../stinger3ver20140327/style.css');
</syntaxhighlight></li>
<li>保存したら新しく作成したフォルダにアップロードするよ。</li>
<li>WordPressのダッシュボードの左メニューから「外観」→「テーマ」をクリックしてね。</li>
<li>新しく作成したテーマが表示されていることを確認して、「有効化」ボタンをクリックしてね。</li>
</ol>

== 各種設定の復旧 ==
テンプレートが切り替わると色々と設定が元に戻ったりするよ。<br/>
僕が覚えている（経験した）範囲で、あげておくね。
*ヘッダー画像
*ナビゲーション
（僕の場合は「外観」→「カスタマイズ」の範囲で設定できるものばかりだったよ）

== 修正の移行 ==
僕の場合の新しく作成したstyle.cssの内容をあげておくね。
<syntaxhighlight lang="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;
}
</syntaxhighlight>
内容は以下の通りだよ。
*<nowiki><p></nowiki>タグの１文字字下げ
*<nowiki><h2></nowiki>タグの見た目変更
*<nowiki><h3></nowiki>タグの見た目変更
*引用の見た目変更
*メニューのドロップダウン化
イメージはSTINGER3のバージョンアップで無くなることが想定されるので、ディレクトリごとコピーしたよ。

== 参考サイト ==
[http://sakihaya.com/2013/12/07/child-theme/ Sakihaya.com | 杉山早のブログ - Stinger3カスタマイズ記録―子テーマを作成するには？]

[[Category:WordPress]]