先日、アフィリエイト関係の記事で「賢威7」を紹介したんですが、たくさん購入してもらえたらなぁと思い、購入特典を考えていました。 それで、購入特典としてカスタマイズ用のコードをお披露目しようと思ってたんですが、購入特典用のページ作ってロックかけたりとか、特典用のバナーに貼りなおしたりとか、なんかもうめんどくさいわぁ。ってことで、普通に公開することにしました。
それって、もったいなくない？
本人がいいと言ってるのでいいのでは？非効率的というかなんというか、もったいないのは間違いないですが。
目次
適用できる前提条件
Caution
- 賢威7ワードプレス版であること
- 編集を行う際は必ず子テーマを使うこと （子テーマの導入は賢威サポートページをご確認ください）
- 編集前に必ずバックアップをとっておくこと （特にfunctions.php元のデータを手元に持っておいた方が良いです）
- 自己責任で行うこと （もし、下記説明でわからない場合は、無理におこなわないこと）
- 可能であればローカル環境で一度試してみてください
【賢威7スタンダード版専用】着せ替え&ウィジェット追加カスタマイズ
ごめんなさい。これは賢威7wpのスタンダード版専用です。軽く確認したところ「ビューティー版」以外は使えそうなんですけど、きちんと確認できていないので、「スタンダード版」に限定させていただきました。
カスタマイズ概要
Point
- ヘッダー領域の簡単色変更
- 背景領域の簡単色変更
- グローバルメニューの簡単色変更
- 見出しの簡単色変更
- 見出しフォントの簡単色変更（一部）
- パンくずリストフォントの簡単色変更
- メインコンテンツの簡単色変更
- サブコンテンツの簡単色変更
- カラムの横幅簡単変更
- フッター領域にウィジェットを3列追加
- フッター領域のウィジェット部の色とかを簡単変更
- フッター領域の簡単色変更
カスタマイズ手順
テーマ編集から賢威7子テーマ内の各ファイルの変更を行っていきます。 もし、すでに何かしらの変更を行っている場合は、適宜修正をお願いします。 
style.cssの変更
賢威7子テーマのスタイルシートに親テーマのファイル名を入れます。 
base.cssの変更
base.cssの最下部にコードを貼り付けます。 
貼り付けるコードはコチラ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
/*------------------------------------------------------------ テンプレート変数設定 -------------------------------------------------------------*/ :root { /*---色の指定---------------------------------------------*/ --header-color: #ffffff; /*ヘッダー色*/ --background-color: #e7f0e1; /*背景色*/ --menu-color: #0eb87d; /*グローバールメニュー色*/ --menuhv-color: #0b9666; /*グローバールメニュー色（カーソル時）*/ --menufont-color: #ffffff; /*グローバールメニューフォント色*/ --menufonthv-color: #ffffff; /*グローバールメニューフォント色（カーソル時）*/ --footer-color: #0eb87d; /*フッター色*/ --footerfont-color: #ffffff; /*フッターフォント色*/ --footerlink-color: #ffffff; /*フッターリンク色*/ --footerlinkhv-color: #ed930b; /*フッターリンク色*/ --footwtitle-color: #ffffff; /*フッターウィジェットタイトル色*/ --footwtitleb-color: #ffffff; /*フッターウィジェットタイトル枠*/ --footwtitlef-color: #000000; /*フッターウィジェットタイトルフォント*/ --heading-color: #0eb87d; /*見出し色*/ --headingf-color: #ffffff; /*見出しフォント色*/ --headingf2-color: #000000; /*見出しフォント色*/ --pankuzu-color: #625b5c; /*パンくずリストフォント色*/ --mainback-color: #ffffff; /*メインコンテンツの背景色*/ --subback-color: #ffffff; /*サブコンテンツの背景色*/ --mainbackb-color: #ffffff; /*メインコンテンツ線色*/ --subbackb-color: #ffffff; /*サブコンテンツ線色*/ /*---サイズ指定--------------------------------------------*/ /*---カラムの割合指定---*/ --mainmenu-size: 65%; /*メインメニューの割合*/ --submenu-size: 30%; /*サブメニューの割合※メインメニューと合わせて100%以内*/ /*---その他---*/ --mainmenub-size: 1px; /*メインメニューのボーダーサイズ*/ --submenub-size: 1px; /*サブメニューのボーダーサイズ*/ --mainmenu-radius: 5px; /*メインメニューに丸みをつける*/ --submenu-radius: 5px; /*サブメニューに丸みをつける*/ --footmenu-radius: 5px; /*フッターメニューに丸みをつける*/ /*var(変数名)で指定;*/ } /*------------------------------------------------------------ テンプレートレイアウト ------------------------------------------------------------*/ /*2カラムレイアウト*/ .col2 .main-conts{ float: left; width: var(--mainmenu-size); } .col2 .sub-conts{ float: right; width: var(--submenu-size); } /*2カラムレイアウト（リバース）*/ .col2r .main-conts{ float: right; width: var(--mainmenu-size); } .col2r .sub-conts{ float: left; width: var(--submenu-size); } /*-------------------------------------------------------- ヘッダー --------------------------------------------------------*/ /*ヘッダーの背景色変更*/ .site-header { background-color: var(--header-color); /*背景画像にしたい場合は画像パスを設定してコメントアウトを解除*/ /* background-image: url("画像パス"); */ } /*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ .global-nav{ padding: 0; background: var(--menu-color); } .global-nav-in li a{ background-color: var(--menu-color); color: var(--menufont-color); } .global-nav-in li a:hover, .global-nav-in li a:active, .global-nav-in li a:focus{ background-color: var(--menuhv-color); color: var(--menufonthv-color); } /*-------------------------------------------------------- パンくずリスト --------------------------------------------------------*/ .breadcrumbs-in{ color: var(--pankuzu-color); } .breadcrumbs-in a{ color: var(--pankuzu-color); } /*-------------------------------------------------------- メインコンテンツ --------------------------------------------------------*/ /*---全体の背景色---*/ body{ background: var(--background-color); /*背景画像にしたい場合は画像パスを設定してコメントアウトを解除*/ /* background-image: url("画像パス"); */ } /*---メインコンテンツの色設定---*/ .section-wrap{ background: var(--mainback-color); border: var(--mainmenub-size) solid var(--mainbackb-color); border-radius: var(--mainmenu-radius); /* box-shadow: rgba(0,0,0,0.4) 3px 3px 6px; */ } /*-------------------------------------------------------- サブコンテンツ --------------------------------------------------------*/ /*---サブコンテンツの色設定---*/ .sub-conts .section-wrap{ margin-bottom: 16px; background: var(--subback-color); border: var(--submenub-size) solid var(--subbackb-color); border-radius: var(--submenu-radius); /* box-shadow: rgba(0,0,0,0.4) 3px 3px 6px; */ } /*-------------------------------------------------------- 見出し --------------------------------------------------------*/ .main-body h1{ background: var(--heading-color); color: var(--headingf-color); } .main-body h2{ background: var(--heading-color); color: var(--headingf-color); } .main-body h3{ border-bottom: 1px solid var(--heading-color); color: var(--headingf2-color); } .main-body h4{ border-bottom: 1px dashed var(--heading-color); color: var(--headingf2-color); } .main-body h5{ border-left: 6px solid var(--heading-color); color: var(--headingf2-color); } .main-body h6{ color: var(--headingf2-color); } /*-------------------------------------------------------- フッターの設定 --------------------------------------------------------*/ /*---フッターの設定---*/ .site-footer{ background: var(--footer-color) !important; color: var(--footerfont-color) !important; } .site-footer a:link{ color: var(--footerlink-color); } .site-footer a:hover{ color: var(--footerlinkhv-color); } /*---フッターウィジェットの設定---*/ footer h3{ border: 1px solid var(--footwtitleb-color); border-radius: var(--footmenu-radius); background: var(--footwtitle-color); color: var(--footwtitlef-color); margin: 30px 20px 20px 20px; padding-top: 5px; padding-bottom: 5px; } #footer-widget{ text-align: center; width: 33%; float: left; margin-bottom: 10px; } #footer-widget li{ padding-right: 15%; text-align: left; list-style-type: none; } #footer-widget a{ text-decoration: none; /* display: block; */ } /*-------------------------------------------------------- スマホ用の設定 --------------------------------------------------------*/ @media only screen and (max-width : 740px){ /*---フッターウィジェットの設定---*/ #footer-widget{ width: 100%; } } |
functions.phpの変更
下記の図の通り、「};」と「?>」の間にコードを貼り付けます。 
貼り付けるコードはコチラ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//--------------------------------------------------------------------------- // フッター用ウィジェット //--------------------------------------------------------------------------- register_sidebar(array( 'name' => 'フッター左側', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'フッター中央', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'フッター右側', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); |
footer.phpは子テーマに含まれていないので、親テーマからコピーしてきます。 FileZillaなどのソフトがあれば簡単ですが、ない場合はエックスサーバーの「ファイルマネージャー」からもできます。 
ファイルの場所：「/ドメイン名/public_html/wp-content/themes/賢威親テーマ/」からダウンロードします。 
アップロード先：「/ドメイン名/public_html/wp-content/themes/keni70_child/」へアップロードします。 
アップロードした（する前でもいいです）footer.phpに下記図のようにコードを貼り付けます。 
貼り付けるコードはコチラ
|
1 2 3 4 5 |
<!--フッターウィジェット--> <div id="footer-widget"><?php dynamic_sidebar('フッター左側'); ?></div> <div id="footer-widget"><?php dynamic_sidebar('フッター中央'); ?></div> <div id="footer-widget"><?php dynamic_sidebar('フッター右側'); ?></div> <!--フッターウィジェット--> |
フッターの編集
最後に賢威のフッターの編集をします。 
貼り付けるコードはコチラ
|
1 2 3 4 |
<div class="site-footer clearfix"> <div class="#footer-widget"> </div> </div> |
これでだいたい完了です。 あとはbase.cssを変更してあなた好みに色などに変更してください。説明はコード内に書いています。 
SEOに強い戦略的テンプレート「賢威7」。レスポンシブWebデザインにも対応！パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属！
【賢威7どれでも使えるマルチ版】ウィジェット追加カスタマイズ
賢威7wpならどのテンプレートでも使用可能です。 ※もし上のスタンダード版を適用させた場合、こちらは不要です。 では、カスタマイズの概要です。というか、上のカスタマイズの中で全てに適用できる部分に限定しただけなんですが、
Point
- フッター領域にウィジェットを3列追加
- フッター領域のウィジェット部の色とかを簡単変更
- フッター領域の簡単色変更
カスタマイズ手順
【賢威7スタンダード版専用】との違いはbase.cssが違うくらいであとは同じです。手順も同じですが、一通り載せておきます。 もし、すでに何かしらの変更を行っている場合は、適宜修正をお願いします。
style.cssの変更
賢威7子テーマのスタイルシートに親テーマのファイル名を入れます。
base.cssの変更
base.cssの最下部にコードを貼り付けます。 貼り付けるコードはコチラ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/*------------------------------------------------------------ テンプレート変数設定 -------------------------------------------------------------*/ :root { /*---色の指定---------------------------------------------*/ --footer-color: #0eb87d; /*フッター色*/ --footerfont-color: #ffffff; /*フッターフォント色*/ --footerlink-color: #ffffff; /*フッターリンク色*/ --footerlinkhv-color: #ed930b; /*フッターリンク色*/ --footwtitle-color: #ffffff; /*フッターウィジェットタイトル色*/ --footwtitleb-color: #ffffff; /*フッターウィジェットタイトル枠*/ --footwtitlef-color: #000000; /*フッターウィジェットタイトルフォント*/ /*---サイズ指定--------------------------------------------*/ --footmenu-radius: 5px; /*フッターメニューに丸みをつける*/ } /*-------------------------------------------------------- フッターの設定 --------------------------------------------------------*/ /*---フッターの設定---*/ .site-footer{ background: var(--footer-color) !important; color: var(--footerfont-color) !important; } .site-footer a:link{ color: var(--footerlink-color); } .site-footer a:hover{ color: var(--footerlinkhv-color); } /*---フッターウィジェットの設定---*/ footer h3{ border: 1px solid var(--footwtitleb-color); border-radius: var(--footmenu-radius); background: var(--footwtitle-color); color: var(--footwtitlef-color); margin: 30px 20px 20px 20px; padding-top: 5px; padding-bottom: 5px; } #footer-widget{ text-align: center; width: 33%; float: left; margin-bottom: 10px; } #footer-widget li{ padding-right: 15%; text-align: left; list-style-type: none; } #footer-widget a{ text-decoration: none; } /*-------------------------------------------------------- スマホ用の設定 --------------------------------------------------------*/ @media only screen and (max-width : 740px){ /*---フッターウィジェットの設定---*/ #footer-widget{ width: 100%; } } |
functions.phpの変更
下記の図の通り、「};」と「?>」の間にコードを貼り付けます。 貼り付けるコードはコチラ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//--------------------------------------------------------------------------- // フッター用ウィジェット //--------------------------------------------------------------------------- register_sidebar(array( 'name' => 'フッター左側', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'フッター中央', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'フッター右側', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); |
footer.phpは子テーマに含まれていないので、親テーマからコピーしてきます。 FileZillaなどのソフトがあれば簡単ですが、ない場合はエックスサーバーの「ファイルマネージャー」からもできます。 ファイルの場所：「/ドメイン名/public_html/wp-content/themes/賢威親テーマ/」からダウンロードします。 アップロード先：「/ドメイン名/public_html/wp-content/themes/keni70_child/」へアップロードします。 アップロードした（する前でもいいです）footer.phpに下記図のようにコードを貼り付けます。 貼り付けるコードはコチラ
|
1 2 3 4 5 |
<!--フッターウィジェット--> <div id="footer-widget"><?php dynamic_sidebar('フッター左側'); ?></div> <div id="footer-widget"><?php dynamic_sidebar('フッター中央'); ?></div> <div id="footer-widget"><?php dynamic_sidebar('フッター右側'); ?></div> <!--フッターウィジェット--> |
フッターの編集
最後に賢威のフッターの編集をします。 貼り付けるコードはコチラ
|
1 2 3 4 |
<div class="site-footer clearfix"> <div class="#footer-widget"> </div> </div> |
あとはbase.cssを変更してあなた好みに色などに変更してください。説明はコード内に書いています。 SEOに強い戦略的テンプレート「賢威7」。レスポンシブWebデザインにも対応！パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属！
まとめ
基本は貼り付けて、好みの色コードに変更するだけなんですが、万が一には備えて作業をお願いします。 これまでカスタマイズしたことない場合は、これをきっかけにカスタマイズの楽しさを味わってもらえればと思います。