Zuki1.1.1にアップデート/ついでにちょっとカスタマイズ

なにげなくzukiのチェンジログみてたら Wordpressテーマで使用中のzukiがアップデートしていたのでアップデート

たまたまドキュメント見ようと公式ページ見てたら1/7にアップデートされていた！。なんのメールもなしに！！

なんとなくこんな感じ？ [green_box]バグの修正：content-featured-post.phpとsearchform.php バグの修正：リストのスタイル追加？（style.css,とfunctions.php）新機能：テーマオプションに投稿ページのFeaturedImageの非表示（customizer.php,とcontent-single.php）新機能：Wordpress4.1で登場したタイトルタグ対応 (functions.php,とheader.php)[/green_box]

ダウンロードしてインストール

手作業でアップデートになります。 zuki購入時のメールのダウンロードリンクからダウンロード。1年はリンクが生きてるらしいので。適当なとこに解凍しておく。

まずFileZillaで全ファイルをローカルにコピーしておきます。 BackWPupは一応してるけど全ファイルコピーするのが安心だ。結構時間かかりました。

そのままダウンロードしたzukiの中身をwp-contentsのテーマフォルダにアップ手っ取り早く確認するのにダッシュボードへ行き、テーマの編集でstyle.cssを見てみます。Version: 1.1.1となって・・・・・いない・・・・・

仕方ないのでWordpressの管理画面のテーマのとこで削除→再アップロードします。テーマは使用中だと削除できないので一旦ほかのテーマを有効に。これで無事アップデート完了です

子テーマ修正

headerとcontent-singleは明らかに修正されているがいっこいっこ見比べるわけにはいかないので、最初に子テーマ作った時と同様にするしかない・・・

とりあえずカスタマイズの少ないcontent-single.phpの子テーマを新しいcontent-single.phpに書き換え

1.カテゴリをぱんくずリストに

インストールしてすぐやったコレ

[Wordpress]SEO的にもちょびーっとだけ有利なリッチスニペットを用いたパンくずリストの作り方

上に書いてある通りに設置してたんですが、アップデート後も同じように の部分をに置き換える。

2.entry-author削除

書いた人の名前が出るのが嫌なのでコメントアウト消しておかしくなったら怖いので＆後から見た時わけわかんなくなるのでコメントアウトさせる

<!--?php if(0){ // コメントアウト開始 ?-->
<div class="entry-author">省略
<!-- end .entry-author -->
<!--?php }      // コメントアウト終了 ?-->

3.続けて巨大サムネイルの削除

このテーマはタイトルの下に横長サイズのサムネイルが表示されてしまうのでそれを上記と同様に消す

さっきの投稿者のすぐ下の</header>下からコメントアウト開始して <?php endif; ?>までコメントアウト

4.シェアボタン

自作のシェアボタンを作っているのですが別ファイルになってないので旧テーマから一式コピー </div>の前に置いてます。適所なのか不明だけど・・・

今までなかったのに突然ボタン下にリンクの下線が出てしまったので子テーマcss修正 aをtext-decoration: noneしても無意味だったので親テーマcssファイル探してborder指定されていたのでシェアボタン部分を0pxに

#snsicon li a{border-bottom: 0px;}

5.最終更新日を表示する

記事の更新日をHTML5対応にして正しくGoogleに伝える方法[Wordpressカスタマイズ]

これもあらかじめfunctions.phpに追加済みなので content-single.phpだけ修正します <div class="entry-date">以下のPublished on をアイコンで表示したいので、<span data-icon="&#xe014"></span>に置き換えて

</div>の前に

<?php if ($mtime = get_mtime('Y/n/j')) echo ' <span data-icon="&#xe080" style="margin-left:5px"></span> ' , $mtime; ?> を挿入。ややこしいけどこう書いておかないと後から何やったかわからなくなる(；´Д｀)

6.YARPPの挿入

最後の方のphp endif;の後ろに <?php related_posts(); ?> 挿入。ほかにどこに入れていいかわからない・・・

header.php

style.cssとfunctions.phpは子テーマで「追加」扱いなのでいいのですが header.phpは置き換えなのでせっかくアップデートされても旧バージョン子テーマファイルのままだと意味が無い・・・

何をカスタマイズしかたよくよく確認。

hilight.jsのcss追加

https://kimigauchu.com/post-1415/ この間追加したhighlight.jsのcssファイルを前に追加。

たいていフッターに追加してるのでこれだけっぽい content.phpとfooter.phpは変更がないようなのでアップデート後の修正は完了。

h2の見出しデザイン変更

丸い枠が付くようにしてましたが飽きてきたのでオーソドックスなものにします https://kimigauchu.com/post-1134/

PCでは左端をはみ出させて、スマホでは左端0pxで

@media screen and (min-width: 1023px) {
/* 980px以上用（PC用）の記述 */
.entry-content h2{
border-bottom: 1px dashed #aaa;
border-left: 7px solid #c4db98;
margin: 0 -15px 15px 0px;
padding: 5px 15px;
}

.entry-content h2{
border-bottom: 1px dashed #aaa;
border-left: 7px solid #c4db98;
margin: 0 -15px 15px -22px;
padding: 5px 15px;

}

ってやってみて確認したけど全然適用されてないわモバイルのcss変わったのかな？見出しのCSSもだし色々と子テーマcss無視されてる。こりゃいかんな・・・スマホでみたら色々めちゃくちゃだわ。

style.css見てみたけど確かにメディアクエリ細かく設定してあって h2は確かに設定されてるけどh3見当たらない。でも前はPC用見出しがそのまま表示されてた。あーーーわからん！いいやもうデフォルトのデザインでも。スマホのデザインが変わってないって、一大事だけど・・・

あとは .entry-content h2:beforeでアイコンつけてたのを削除 h3に下線とアイコン追加

地味にfeedlyアイコンがうまく表示されてなくていらついて画像にしたわ・・・すっげえ時間かけたのに。