Virtue Customize Memo

テーマ Virtue のカスタマイズがほぼ終わった。
あれこれ記事も書きながらで、これまでの最短の作業時間で済んだ。
というのもあらかた別サイトのカスタマイズを踏襲しているからなのだが。
それでも、特にこのサイトでやったことを中心にメモしておこう。

1. トップページ

List Category Posts で、最近の投稿を画像、日にち、抜粋で6件表示させるように自作する。ページネーション表示用のタグをショートコードに追加、CSS編集。

主なカテゴリをiconのタイル表示に割り当てる。ただし、iconではなく、Themeのデモに入っていた画像を利用。サイズは加工した。

Portfolioを利用してプロジェクトをカルーセル表示。

サイドバーの最近の投稿とListCategory Posts 表示がダブってうるさいので、思い切ってトップのみワンカラムとする。すっきりした。

9/18

Ciao! に書いた記事をHOMEのトップに表示させるよう修正。ListCategoryPosts でやろうかとも思ったが、HOME用の固定ページに直接画像と（新規に）リード分を記入、リンクを貼り、CSSを指定した。ページネーションで次ページにも出てしまうが、これは仕方ないか。画像が大きいとページ遷移したかどうかわからないので、小さめにする。

2. 画像関連

基本的にはFlickrから画像を読み込むことにした。ただし、Portfolio以外。相変わらずFeatured Image From URL 利用である。画像はスクエアでかつラフなふちどりにFlickrで加工。

今回の収穫は、アーカイブページにも外部サイトからの画像をサムネールとして表示できるようになったこと。子テーマのfunctions.phpに以下を追加

function catch_that_image() {  global $post, $posts;  $first_img = '';  ob_start();  ob_end_clean();  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);  $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image  $first_img = "/images/default.jpg";  }  return $first_img; }

続いて子テーマの templates/content.php 72行目あたりのimg src を以下に変更

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />

その下の三行 meta itemprop は削除。

※注意点

1）記事編集ページでPost Summaryをデフォルトのままではアーカイブページのリストにサムネールが出ない。ここをPortlate Imageにすると表示されるようになった。Theme Options でも設定する。

2）9/17日、Slickr Flick 導入時、アーカイブのサムネールが表示されなくなったが、問題は画像aタグのあとのscrptタグを削除しわすれていたのが問題であった。

9/17

Slickr Flickr 導入。これで複数画像をFlickrのアルバムから引っ張ってきてギャラリーとして表示できるようになった。
18日、CSS調整。

3. 更に子テーマに追加したファイル

templates/head.php
　→モリサワフォント読み込み用のscript記載のため

templates/content-singleportfolio.php
　→Portfolioページ右上のインデックスへのリンクをじか書き

4. 常時SSL化

ロリポップも無料で常時SSL化ができるようになっていたので適用。記事中のリンクをSearch Rigexで修正。一般設定のサイトアドレスURL二箇所をhttpsに変更しなければいけないのに気付かず、時間をロス。

3. Portfolio

PortfolioのサムネールだけはFlickrからひっぱってこれない。Portfolio用の画像をメディアにアップする。もしかしたら、ページのトップ画像をサムネール化できる方法で可能となるかもしれないとトライしてみたけれど無理そう。

Portfolioのインデックスとなる固定ページが、テンプレートPortfolio Gridを適用させても、各Portfolioページ右上のリンクに出ない。別サイトでは問題なかったんだけれど、原因がよくわからないので、直接テーマファイルにURLを書き込む。

templates/content-singleportfolio.php の以下の部分

<a href="../">　→　<a href="../projects">

4. フォント

VirtueにはGoogleフォントが組み込まれているので、タイトルにお気に入りのArchitekts Daghterを適用。ただしGoogoleフォントは欧文のみのため、そのままだと和文はデフォルトのゴシック系となる。幸いモリサワの無料フォント枠が一つ空いたので、Nachinを組み合わせることにした。毎日見ていると飽きてくるような気もするが…。

と、ここまでそれほど苦労なく来ていてコワイくらいである。

5. 残り作業

☑ Jetpack 設置

☑ コンタクトフォーム設置
　→ Contact Form 7 がおすすめになっていたので導入。固定ページのテンプレートをContact formにすれば、それだけでシンプルなフォームが出来る。MAPがはいるようになっているせいか、左が大きく空いているので、画像を置いておく。デフォルトの固定ページにContact Form 7のショートコードを入れたほうがいいかなあ…。でも、数式まで入ってるし、とりあえずはこのままでいいか。（CF7でもGoogleのアカウントでCapchaが利用できるみたいだけど）

☑ 画像圧縮、DB圧縮、その他必要プラグイン導入

☑ 固定ページでサイトマップ作成：CSS未調整

☑ ファビコン
　→ico画像をメディアにアップしてThemeOptionsでURLを指定するだけ。
　　Virtueはすごい。画像的にはとってもイージーだけど。
　　お世話になったico変換サイト：https://ao-system.net/favicon/

☑ 表示速度調整
　→GTMetrix トップページアイコン画像のリサイズ、ブラウザキャッシュ用のコードを.htaccessに記載、CSSをfunctions.phpから読み込む（＠を避ける）、プラグインAutoptimizeでCSSとHTMLを圧縮、WP Smushで画像を圧縮、不要な画像をメディアから削除などを行った結果A93％、C76%となった。が、読み込み速度7.3秒、トータルサイズ1.16MBというのはあまり芳しくない数字。デモで入ってしまった不要記事は、今後の参考のため下書きとして残してあるけれど、あれも削除したほうがいいだろうか…。

☑ モバイル設定
→ThemeOptionsとメニューで設定するも、モバイルでセカンドメニュー（メインナビ）が表示されない。フッターメニュー調整で良しにしようか。
また、iPhone 6だとトップの画像リストの枠が一部欠ける。画像も本文も問題ないため、このままでもいいか、とも思う。

→ CSSの設定で色の指定がまずかったため。サイズ・フォントその他も修正。画像サイズも修正。

☑ Google XML sitemap、All In One SEO Pack 追加

☑ Google searchconsole 登録

☑ その他プラグイン検討 ： DBバックアップ（このためだけでもwpXに引っ越したいのだが）→引っ越し済
　　PDFファイル埋め込み用プラグイン導入

☑ 独自ドメイン取得、wpXに引っ越し

□ IEでチェクしたらトップページの最近の投稿ページネーションにCSSが効いていない。やっぱりIE嫌いだあ～～～！！！