701
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「今までは、直接STINGER3テンプレートを修正していたんだけど、どうやら直接編集しないほうが良いようなんだ。<br/> なぜかとい…」
今までは、直接STINGER3テンプレートを修正していたんだけど、どうやら直接編集しないほうが良いようなんだ。<br/>
なぜかというと、バージョンをアップデートしたときにせっかく修正したものが消えてしまうそうなんだよ。<br/>
イメージ的には親クラス（STINGER3）を継承してオリジナルのサブクラスを生成するような感じだね。
== 新しいテンプレートを作成する ==
<ol>
<li>以下のディレクトリ配下に、新しくSTINGER3を継承して作成するテンプレート名のディレクトリを作成する。
<pre>/home/【ドメイン名】/www/【wordpressインストールディレクトリ】/wp-content/themes/【新しいテンプレート名】</pre>
ちなみに僕は「stinger3-child」ってディレクトリを作成したよ。</li>
<li>以下の内容で「style.css」ってファイルを作成してね。
<source lang="css">
/*
Theme Name: 【フォルダ名に同じ】
Template: stinger3verYYYYMMDD
*/
@import url('../stinger3verYYYYMMDD/style.css');
</source >
ちなみに「YYYYMMDD」はインストール済みのSTINGER3のバージョンと同じにしてね。<br/>ちなみに僕の場合はこんな感じ･･･
<source lang="css">
/*
Theme Name: stinger3-child
Template: stinger3ver20140327
*/
@import url('../stinger3ver20140327/style.css');
</source ></li>
<li>保存したら新しく作成したフォルダにアップロードするよ。</li>
<li>WordPressのダッシュボードの左メニューから「外観」→「テーマ」をクリックしてね。</li>
<li>新しく作成したテーマが表示されていることを確認して、「有効化」ボタンをクリックしてね。</li>
</ol>
== 各種設定の復旧 ==
テンプレートが切り替わると色々と設定が元に戻ったりするよ。<br/>
僕が覚えている（経験した）範囲で、あげておくね。
*ヘッダー画像
*ナビゲーション
（僕の場合は「外観」→「カスタマイズ」の範囲で設定できるものばかりだったよ）
== 修正の移行 ==
僕の場合の新しく作成したstyle.cssの内容をあげておくね。
<source 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;
}
</source>
内容は以下の通りだよ。
*<nowiki><p></nowiki>タグの１文字字下げ
*<nowiki><h2></nowiki>タグの見た目変更
*<nowiki><h3></nowiki>タグの見た目変更
*引用の見た目変更
*メニューのドロップダウン化
イメージはSTINGER3のバージョンアップで無くなることが想定されるので、ディレクトリごとコピーしたよ。
== 参考サイト ==
[http://sakihaya.com/2013/12/07/child-theme/ Sakihaya.com | 杉山早のブログ - Stinger3カスタマイズ記録―子テーマを作成するには？]
[[Category:WordPress]]
なぜかというと、バージョンをアップデートしたときにせっかく修正したものが消えてしまうそうなんだよ。<br/>
イメージ的には親クラス（STINGER3）を継承してオリジナルのサブクラスを生成するような感じだね。
== 新しいテンプレートを作成する ==
<ol>
<li>以下のディレクトリ配下に、新しくSTINGER3を継承して作成するテンプレート名のディレクトリを作成する。
<pre>/home/【ドメイン名】/www/【wordpressインストールディレクトリ】/wp-content/themes/【新しいテンプレート名】</pre>
ちなみに僕は「stinger3-child」ってディレクトリを作成したよ。</li>
<li>以下の内容で「style.css」ってファイルを作成してね。
<source lang="css">
/*
Theme Name: 【フォルダ名に同じ】
Template: stinger3verYYYYMMDD
*/
@import url('../stinger3verYYYYMMDD/style.css');
</source >
ちなみに「YYYYMMDD」はインストール済みのSTINGER3のバージョンと同じにしてね。<br/>ちなみに僕の場合はこんな感じ･･･
<source lang="css">
/*
Theme Name: stinger3-child
Template: stinger3ver20140327
*/
@import url('../stinger3ver20140327/style.css');
</source ></li>
<li>保存したら新しく作成したフォルダにアップロードするよ。</li>
<li>WordPressのダッシュボードの左メニューから「外観」→「テーマ」をクリックしてね。</li>
<li>新しく作成したテーマが表示されていることを確認して、「有効化」ボタンをクリックしてね。</li>
</ol>
== 各種設定の復旧 ==
テンプレートが切り替わると色々と設定が元に戻ったりするよ。<br/>
僕が覚えている（経験した）範囲で、あげておくね。
*ヘッダー画像
*ナビゲーション
（僕の場合は「外観」→「カスタマイズ」の範囲で設定できるものばかりだったよ）
== 修正の移行 ==
僕の場合の新しく作成したstyle.cssの内容をあげておくね。
<source 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;
}
</source>
内容は以下の通りだよ。
*<nowiki><p></nowiki>タグの１文字字下げ
*<nowiki><h2></nowiki>タグの見た目変更
*<nowiki><h3></nowiki>タグの見た目変更
*引用の見た目変更
*メニューのドロップダウン化
イメージはSTINGER3のバージョンアップで無くなることが想定されるので、ディレクトリごとコピーしたよ。
== 参考サイト ==
[http://sakihaya.com/2013/12/07/child-theme/ Sakihaya.com | 杉山早のブログ - Stinger3カスタマイズ記録―子テーマを作成するには？]
[[Category:WordPress]]
