Simplicity2 を2.2.7へ更新するお話
この記事は2016年8月24日に書かれたものです。ご注意ください。
基本的には子テーマ（simplicity2-child）で対応しているが、一部親テーマを弄らないと動かない機能がある。その備忘録として纏めていきます。
今後は子テーマで対応できるよう調整していきたい。
今回、久しぶりのアップデートのため結構な修正となりました。
自作フォントを追加
今回アップデートさせる際、以前作ったフォントだけでは対応できなかったので、新たにフォントを作成。
logoとsquareの2種類を用意。なお名称のicon-がダブってるけどあとで修正しておきました。
この自作Webフォントを以下にアップロード。ただし、フォルダー名を「fonts1」へリネーム。
- webfonts/icomoon
またここに置かれているCSSを修正。これはフォントを作った際についてくるCSSを一部修正してあげれば良い（各種font/をfont1/にするだけ）。
- webfonts/icomoon/style.css
webfonts/icomoon/style.css@font-face {
font-family: 'icomoon';
src: url('fonts1/icomoon.eot?hn51yd');
src: url('fonts1/icomoon.eot?hn51yd#iefix') format('embedded-opentype'),
url('fonts1/icomoon.ttf?hn51yd') format('truetype'),
url('fonts1/icomoon.woff?hn51yd') format('woff'),
url('fonts1/icomoon.svg?hn51yd#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-nico-logo:before {
content: "\e701";
}
.icon-nico-square:before {
content: "\e702";
}
.icon-steam-square:before {
content: "\e712";
}
.icon-steam-logo:before {
content: "\e711";
}フォローボタンを増やす
自作フォントを含む、フォローボタンを増やすには以下のファイルを修正する必要がある。
- simplicity/sns-pages.php
- simplicity/lib/customizer.php
- simplicity/style.css
Twitterなどを参考に編集してください。classは先ほど修正したCSSにあわせる。
simplicity/sns-pages.php<?php if ( get_nico_follow_id() )://ニコニコ動画フォローボタンを表示するか ?><li class="nico-page"><a href="//www.nicovideo.jp/user/<?php echo esc_html( get_nico_follow_id() ); //ニコニコ動画フォローIDの取得?>" target="_blank" title="ニコニコ動画でフォロー" rel="nofollow"><span class="icon-nico-logo"></span></a></li><?php endif; ?>
<?php if ( get_steam_follow_id() )://Steamフォローボタンを表示するか ?><li class="steam-page"><a href="//steamcommunity.com/id/<?php echo esc_html( get_steam_follow_id() ); //SteamフォローIDの取得?>" target="_blank" title="Steamをフォロー" rel="nofollow"><span class="icon-steam-logo"></span></a></li><?php endif; ?>まず1カ所目。「//TwitterフォローID」のコメントを頼りに書き込む。
simplicity/lib/customizer.php //ニコニコ動画フォローID
$wp_customize->add_setting('nico_follow_id', array(
'sanitize_callback' => 'sanitize_text',
));
$wp_customize->add_control( 'nico_follow_id', array(
'settings' => 'nico_follow_id',
'label' =>'www.nicovideo.jp/user/XXXXXXX',
'description' => is_tips_visible() ? 'ニコニコ動画ページURLのXXXXXXX部分を入力してください。＠は不要です。' : '',
'section' => 'sns_section',
'type' => 'text',
'priority' => 88,
));
//steamフォローID
$wp_customize->add_setting('steam_follow_id', array(
'sanitize_callback' => 'sanitize_text',
));
$wp_customize->add_control( 'steam_follow_id', array(
'settings' => 'steam_follow_id',
'label' =>'steamcommunity.com/id/XXXXXXX',
'description' => is_tips_visible() ? 'steamページURLのXXXXXXX部分を入力してください。' : '',
'section' => 'sns_section',
'type' => 'text',
'priority' => 89,
));2カ所目。「TwitterフォローボタンのIDを取得」を探して書き込む。
simplicity/sns-pages.php//ニコニコフォローボタンのIDを取得
function get_nico_follow_id(){
return get_theme_mod( 'nico_follow_id', null );
}
//SteamフォローボタンのIDを取得
function get_steam_follow_id(){
return get_theme_mod( 'steam_follow_id', null );
}なんとなくで書き込んでおく。これないと見栄え悪い。
simplicity/style.css/************************************
** SNSページフォロー
************************************/
/* ニコニコ */
ul.snsp li a span.icon-nico-logo{
font-size:34px;
}
ul.snsp li.nico-page a span:hover{
background-color:#9c9ca6;
}
ul.snsp li.nico-page a img{
margin-bottom:-3px;
width:32.5px;
height:32.5px;
border-radius:7px;
border-width:0px;
}
/* Steam */
ul.snsp li a span.icon-steam-logo{
font-size:34px;
}
ul.snsp li.steam-page a span:hover{
background-color:#171A21;
}
ul.snsp li.steam-page a img{
margin-bottom:-3px;
width:32.5px;
height:32.5px;
border-radius:7px;
border-width:0px;
}これでとりあえずは大丈夫。
ちなみに各種ファイルの書き方が微妙に変更されているため、そのままコピーしたらエラーになるので注意。
以下、残タスク
・フォントサイズの調整