WordPressでSTINGER3の子テンプレートを作成する
今までは、直接STINGER3テンプレートを修正していたんだけど、どうやら直接編集しないほうが良いようなんだ。
なぜかというと、バージョンをアップデートしたときにせっかく修正したものが消えてしまうそうなんだよ。
イメージ的には親クラス（STINGER3）を継承してオリジナルのサブクラスを生成するような感じだね。
目次
新しいテンプレートを作成する
- 以下のディレクトリ配下に、新しくSTINGER3を継承して作成するテンプレート名のディレクトリを作成する。
ちなみに僕は「stinger3-child」ってディレクトリを作成したよ。
/home/【ドメイン名】/www/【wordpressインストールディレクトリ】/wp-content/themes/【新しいテンプレート名】
- 以下の内容で「style.css」ってファイルを作成してね。
/* Theme Name: 【フォルダ名に同じ】 Template: stinger3verYYYYMMDD */ @import url('../stinger3verYYYYMMDD/style.css');
ちなみに「YYYYMMDD」はインストール済みのSTINGER3のバージョンと同じにしてね。
ちなみに僕の場合はこんな感じ･･･/* Theme Name: stinger3-child Template: stinger3ver20140327 */ @import url('../stinger3ver20140327/style.css');
- 保存したら新しく作成したフォルダにアップロードするよ。
- WordPressのダッシュボードの左メニューから「外観」→「テーマ」をクリックしてね。
- 新しく作成したテーマが表示されていることを確認して、「有効化」ボタンをクリックしてね。
各種設定の復旧
テンプレートが切り替わると色々と設定が元に戻ったりするよ。
僕が覚えている（経験した）範囲で、あげておくね。
- ヘッダー画像
- ナビゲーション
（僕の場合は「外観」→「カスタマイズ」の範囲で設定できるものばかりだったよ）
修正の移行
僕の場合の新しく作成した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のバージョンアップで無くなることが想定されるので、ディレクトリごとコピーしたよ。