WordPressのカスタマイズ 【備忘録】

NO IMAGE
古いエントリーが表示されているかもしれないので、是非、「投稿日」を確認してください

WordPressの変更方法を忘れると困るので、備忘録として書いておきます。

○ 使っているテーマを直接いじると、テーマが更新された時に変更箇所は上書きされて消えてしまう。

これを回避するには

○ テーマを直接いじるのではなくて子テーマフォルダーを作り、その中身をいじる。

まず一番大事なことは変更前には必ずバックアップをとること

子テーマの作り方。

○ サーバーにアクセスし、テーマの入っているフォルダーに子テーマを作る(名前は何でもOK)。

○ テーマが入っている場所は ドメイン/wp-content/themes/

その子テーマの中に2つのファイルをコピーする。

1 style.css
2 functions.php

そのファイルの中身を書き換える。

1 style.cssは

/*
Theme Name: 子テーマの名前
Description: 子テーマについての説明
Author: 名前(管理者名)
Template: twentyeleven (元になっているテーマ名)
Theme URI: サイトURLまたは子テーマのディレクトリ名
Author URI: サイトURL
Version: 1.0 (好きなバージョン)
*/
この後に変更したい箇所「だけ」を書く。

2 functions.phpは

add_action( ‘after_setup_theme’, ‘my_child_theme_setup’ );
function my_child_theme_setup() {
// ここに足したい関数を書く。
}

ここで注意することは、

○ 子テーマのstyle.cssに書かれたことは親テーマの該当箇所より「優先する」。
○ 子テーマのfunctions.phpに書かれたことは「優先しない」。親テーマとダブっているとエラーとなる。つまり書き足しは出来ても変更する場合は親テーマをいじるしかない。つまり親テーマの該当部分を「削除する」か「変更」する。

—————-

今回は変更した部分を書き出しておきましょう。すぐ忘れちゃいますから。(笑)

style.cssの変更点

○ 表示幅の変更
90行の
#page {
margin: 2em auto;
max-width: 1000px;
}

#page {
margin: 2em auto;
max-width: 1200px;
}
に変更。

105行の
#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%;
}
に変更。

○ 見出しタイトルの変更
754行の
.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,’MS Pゴシック’,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%;
}
に変更。

1835行の
.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の17行目から27行目までを end of the loop の上にコピーする。

「にほんブログ村」のランキングに参加しております。是非、応援のクリックをお願いします。

にほんブログ村 海外生活ブログ マレーシア情報へにほんブログ村 海外生活ブログへにほんブログ村 海外生活ブログ ゴールドコースト情報へ