WordPressの変更方法を忘れると困るので、備忘録として書いておきます。
○ 使っているテーマを直接いじると、テーマが更新された時に変更箇所は上書きされて消えてしまう。
これを回避するには
○ テーマを直接いじるのではなくて子テーマフォルダーを作り、その中身をいじる。
まず一番大事なことは変更前には必ずバックアップをとること。
子テーマの作り方。
○ サーバーにアクセスし、テーマの入っているフォルダーに子テーマを作る（名前は何でもOK）。
○ テーマが入っている場所は ドメイン/wp-content/themes/
その子テーマの中に２つのファイルをコピーする。
１ style.css
２ functions.php
そのファイルの中身を書き換える。
１ style.cssは
/*
Theme Name: 子テーマの名前
Description: 子テーマについての説明
Author: 名前（管理者名）
Template: twentyeleven (元になっているテーマ名)
Theme URI: サイトURLまたは子テーマのディレクトリ名
Author URI: サイトURL
Version: 1.0 （好きなバージョン)
*/
この後に変更したい箇所「だけ」を書く。
２ functions.phpは
add_action( ‘after_setup_theme’, ‘my_child_theme_setup’ );
function my_child_theme_setup() {
// ここに足したい関数を書く。
}
ここで注意することは、
○ 子テーマのstyle.cssに書かれたことは親テーマの該当箇所より「優先する」。
○ 子テーマのfunctions.phpに書かれたことは「優先しない」。親テーマとダブっているとエラーとなる。つまり書き足しは出来ても変更する場合は親テーマをいじるしかない。つまり親テーマの該当部分を「削除する」か「変更」する。
—————-
今回は変更した部分を書き出しておきましょう。すぐ忘れちゃいますから。（笑）
style.cssの変更点
○ 表示幅の変更
９０行の
#page {
margin: 2em auto;
max-width: 1000px;
}
を
#page {
margin: 2em auto;
max-width: 1200px;
}
に変更。
１０５行の
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
を
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 30.6% 0 7%;
width: 62.4%;
}
#secondary {
float: right;
margin-right: 2%;
width: 22%;
}
に変更。
○ 見出しタイトルの変更
７５４行の
.entry-title {
clear: both;
color: #222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: .3em;
padding-top: 15px;
}
を
.entry-title { /* 見出しのスタイル */
clear: both;
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: normal;
background: #9e0303; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#9e0303, #cf4444);
background: -o-linear-gradient(#9e0303, #cf4444);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e0303), to(#cf4444)); /* older webkit syntax */
background: -webkit-linear-gradient(#9e0303, #cf4444);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;float: left;
box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
display: block;
float: left;
margin: 0;
padding: 0 0 0 12px;
width: 100%;
}
に変更。
１８３５行の
.widget-title {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
を
.widget-title { /* ココ*/
clear: both;
margin: 0 0 10px 0;
padding: 2px 8px;
border-width: 0 0 2px 3px;
border-color: #444444;
border-style: solid;
background: #b91d3a;
color: #ffffff;
font-size: 13px;
line-height: 140%;
font-weight: normal;
text-transform: uppercase;
}
に変更。
○ 前へ次への文字変更
single.phpを子テーマにコピーし、その内容を変更。previousを古い投稿、nextを新しい投稿に変更する。
○ 記事の終わりにもナビゲータを付ける。
single.phpの１７行目から２７行目までを end of the loop の上にコピーする。