Simplicity2 を2.2.7へ更新するお話

2017年9月14日WordPress, 技術

この記事は2016年8月24日に書かれたものです。ご注意ください。

基本的には子テーマ(simplicity2-child)で対応しているが、一部親テーマを弄らないと動かない機能がある。その備忘録として纏めていきます。
今後は子テーマで対応できるよう調整していきたい。

今回、久しぶりのアップデートのため結構な修正となりました。

自作フォントを追加

https://prfac.com/?p=102

今回アップデートさせる際、以前作ったフォントだけでは対応できなかったので、新たにフォントを作成。
アイコン
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";
}

フォローボタンを増やす

https://prfac.com/?p=75

自作フォントを含む、フォローボタンを増やすには以下のファイルを修正する必要がある。

  • 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;
}

これでとりあえずは大丈夫。
ちなみに各種ファイルの書き方が微妙に変更されているため、そのままコピーしたらエラーになるので注意。

以下、残タスク
・フォントサイズの調整

Posted by みせる