合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

カテゴリー: Wordpress

掲載日:
カテゴリー: Wordpress

構造化データ > hentry(マークアップ: microformats.org) author/entry-title/updated がありません

Google Search Content 構造化データ マークアップ

構造化データ > hentry(マークアップ: microformats.org)対応について

WordPressで構造化データに対応していない、もしくは対応が不十分なテーマだと、Google Search Consoleで構造化データのエラーが多発する場合があります。

author がありません
entry-title がありません
updated がありません

構造化データのエラーが発生しても直接はSEOに影響するわけではありませんが、検索結果の表示に影響しますので、不適切な構造化データだと、クリック率に影響して、長期的・間接的にSEOへ影響します。Wordpressはデフォルトで<article>に[class=”hentry”]付加してくれますので、折角なので対応します。

対応は、適切な箇所にclass=author/entry-title/updatedを追加するだけ

通常、投稿記事には「author」と「entory-date」は、大概のテーマではあるはずなので、そこのclassにauthorとupdatedを追記すればOKなのですが、この時2つのポイントに注意が必要です。

hentryで囲まれた中であること(通常はこの条件は満たすが、自作テーマやメインコンテンツの外枠に表示するような特殊な構造だと注意が必要)

entory-date/updatedには、形式のルールがあり、これに則している必要があります。

 $time_string = '掲載日: <time class="entry-date published updated" datetime="%1$s">%2$s</time>';
 if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
 $time_string = '掲載日: <time class="entry-date published" datetime="%1$s">%2$s</time> / 更新日: <time class="updated" datetime="%3$s">%4$s</time>';
 }
 $time_string = sprintf( $time_string,
 esc_attr( get_the_date( 'c' ) ),
 esc_html( get_the_date() ),
 esc_attr( get_the_modified_date( 'c' ) ),
 esc_html( get_the_modified_date() )
 );
 $posted_on = sprintf(
 esc_html( '%s', 'post date' ),
 '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 );

こんな感じ

authorは通常この後に表示される(?)ので、その部分にclass:authorを追記、表示がなければ以下のような感じで、上記の記述に続けて追加します。

 $byline = sprintf(
 esc_html( 'by %s', 'post author' ),
 '<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
 );
 echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; 

最後にentory-titleの対応方法には2つのパターンがあります。

hentryで囲まれた中にTitle表示はある場合は、そのtitleのclassにentory-titleを追加するだけですが、本ページで使用しているテーマのようにhentryのarticleの外にtitle表示はある場合は、別途にhentryに囲まれた中にtitle表示を追加する必要があります。

本ページのテーマの場合は、以下のようにしています。

上記2つの記述に加えて、以下を記述

 <div class="entry-title-style">
 <?php if( is_home() || is_front_page() ) { ?>
 <span class="entry-title"><a href="<?php esc_url( get_permalink() ) ?>" rel="bookmark">home</a></span>
 <?php } elseif ( is_single() ) {
 the_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_archive() ) {
 the_archive_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_search() ) {
 ?><span class="entry-title"><?php the_search_query();?> で検索した結果</span><?php
 } else {
 the_title( '<span class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></span>' );
 }
 ?>
 </div>

これまでのまとめて、functions.phpで関数定義して、適当な場所に差し込みます。

/* 構造化データ post-date/time , author. and title */
function pureframe_posted_on() {
/* 上記3つの記述をここに */
 <?php 
}

で適当な場所に

pureframe_posted_on();

固定ページへの対応方法

投稿ページには、投稿日や執筆者名が通常あるので、上記の方法で通常対応できると思いますが、固定ページの場合は、これらの記載はない場合が多いのではないかと思います。固定ページでは”hentry”をとってしまうのもありなのかもしれませんが、上記の3つの記述は固定ページにも一応対応していますので、「pureframe_posted_on();」を適当な場所に挿入します。

固定ページのarticleを閉じる直前など記事の邪魔が少ない(デザインへの影響が少ない)場所に挿入します。

最後に

この対応は、本テーマでの現時点(2017.10.1)での対応で不十分な部分も多々あると思いますので、流用される場合は自己責任で(^-^;

WordPressでAMP(Accelerated Mobile Pages)対応は簡単!だけど….


WordPressでAMP(Accelerated Mobile Pages)対応

このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問(現状では、表示速度やビジュアル性が低下する場合が多々ある)なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。

現状、手間をかけてAMP対応はしたくないので、プラグイン「Accelerated Mobile Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。(開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。)

ampプロジェクトのプラグイン「AMP」ではなく「Accelerated Mobile Pages」をインストール

最初、Googleも案内するampプロジェクトの「AMP」をインストールしてみましたが、単独では使用できず追加のプラグインを要求されるし、設定方法も分り難いので、設定が分かり易い「Accelerated Mobile Pages」を使用します。

Accelerated Mobile Pagesの設定は簡単

プラグインをインストールして、有効にした後、AMPforWP OptionsのSettingsとDesignを設定するだけ、沢山設定がありますが、とりあえずわかるところだけでも設定して、<your url>/ampを見てみましょう!

Accelerated Mobile Pagesの設定の注意点

Custom CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。Custom CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。

Google Search consoleで「重大な問題のある AMP ページ」と表示されてしまいます。

コメントに禁止CSSと類似の記載があっても「重大な問題のある AMP ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。

設定後はしばらくは、注意してGoogle Search consoleを見ましょう。もし、「重大な問題のある AMP ページ」と表示されてしまったら、速やかに修正しましょう。

その他、AMPページ作成でのポイント

各ページをAMP対応に変更したい場合は、SettingのPage Builder / Legacy Page Builder (widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。

モバイルページはAMPを標準としたい場合は、SettingのAdvance Settings / Mobile Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。ただ、この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。ちなみに、このRedirection設定をしなくてもGoogle Search consoleはAMPページを認識します。

 

実は、まだこのサイトも対応中の段階で、ここでの記載は最終的に変更される可能性があります….(^-^;

Accelerated Mobile Pages設定項目について(追加)

SettingsのStructured Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。

pure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。


pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

 

ABC

 

A
B
C

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

ABC

A:1、B:2、C:3

BC
A

A:3、B:1、C:2

B
A
C

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。

/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}
掲載日:
カテゴリー: Wordpress

WordPressのカスタムHTMLやカスタムCSSが保存できない場合の対処


WordPressの新しいカスタムHTMLウィジェットが保存できない

テキスト ウィジェットと違い自動で<p>タグで括らず、htmlを記述できる新しい機能ですが、セーブが完了しない事があります。

この他にも、カスタムcssや投稿記事内でjavascriptを記述した場合とかも同様にセーブできない。セーブできたように見えても、保存出来てなかったなどが発生することがあります。

SiteGuardが動作している環境では、次の対処で解決します。

SiteGuardが稼働中の環境での対処方法

SiteGuardはセキュリティ強化を手軽に強力にしてくれる便利で頼れるWordpressのプラグインですが、セキュリティ対策故に誤動作して悪さをしてしまう事があります。間違いはないはずなのに保存・実行の段階で期待通りに動かない場合は、次のように対処しましょう。

  1. レンタルサーバーの管理画面で、WAF機能のログを見てみましょう。
  2. 不具合が発生した時間にログが登録されていたら、その「URL」と「検出されたシグネチャ」をメモしましょう。
  3. WordPressの管理画面のSiteGuardのWAFチューニングサポートのメニューを開きます。
  4. 「新しいルールの追加」をクリックして、シグネチャとファイル名、コメントの入力画面にします。
  5. メモした「検出されたシグネチャ」をシグネチャへ、「URL」をファイル名に記入して保存します。

これで問題は解決するはずです。うまくいかない場合は、再度見直し(半角スペースやtabが挿入されていないか?など)修正は、一度削除して新規に入力し直すと良いと思います。修正だとうまく反映されない場合があるようです。WAFチューニングの設定方法の詳細はこちら

WAFチューニングをしても解決しない場合

SiteGuard以外にも要因になるプラグインはあると思います(定義が重なっている場合など)が、まずは、自分の作業内容を疑って、もう一度、丁寧に見直しましょう。もし新たに変数・関数定義をした場合などはユニークとなっているか?(簡単な確認方法は私は知りませんので、グローバルな定義は頭に特定のキーワードを付けるようにしています。)

そのうえで、やっぱり、不具合時にWAF機能にログが登録されているようなら、追加したWAFチューニングの設定を削除して、入力し直して見ましょう。

WordPressのビジュアルエディタTinyMCEを少し使いやすくする。


TinyMCEによく使うフォントや折角のフレームワークを登録して使いやすくする。

TinyMCE Advanceでツールアイコンを追加したりして、使いやすくできるのですが、フォントやスタイルまではやってくれません。

スタイルについては、editor-style.cssでCSSを読み込んで見栄えを実際に近くでき、CSSのclassを付加することも出来ますが、セレクタ(tag)は指定は出来ません。

editor-style.cssを読み込んで、出来上がりに近い表示にする。

function.phpに以下の1行を追加します。

add_editor_style( array( 'css/editor-style.css' ) );

ここでは、cssフォルダーの下のeditor-style.cssを読み込んでいます。

editor-style.cssには、H1/H2/H3/…などをstyle.cssなどから抽出して記入します。初期設定と記事作成に使うタグだけなので、さほど多くはないと思います。あと、CSSフレームワーク関係も使えるようにしたいので、初期設定の部分と記事作成に使うものを抽出して追加します。 @importで丸ごとインポートもできるようですが、面倒でも必要な部分だけを記述するのが良いと思います。 フレームワークは、記事作成時には影響は少ないと思いますので、どの部分が必要かわからない場合は、省略でも良いと思います。 pure.cssの場合は、baseとtable、あと必要に応じてButtonsとGridでしょうか。記述の順番は以下の様な感じで(同じセレクタなら最後の設定が有効なので)

  1. pure.css Base
  2. pure.css Buttons
  3. pure.css Tables
  4. pure.css Grids
  5. style.cssから抽出した共通(基本)設定とH1/H2/H3/…など

多機能のフレームワークを使っていて、どの部分を抽出すればよいかわからない場合は、記事ではpure.cssを使う方法もあります。大変小さいフレームワークで、他との競合もないので、追加しても邪魔にはならないと思います。

プラットフォーム違いでも使える代表的英字フォントと日本語フォントに変更する。

こちらも、function.phpに以下を追加します。

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

フレームワークを利用する為のオリジナルのスタイルを登録する。

記事もレスポンシブ対応させる必要が多々あると思います。特に画像や表などは面倒ですし、よくわからない人にclassを追加してなんて言ってもわかりません。

ここでは、もともとのpure.cssとの対比が分かり易い(自分が使う為の設定なので)表記で登録していますが、実際に使う方が分かり易い表記にすればよいと思います。

先ほどのフォントと合わせて、

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 $style_formats = [
 [
 'title' => 'Responsive Images',
 'selector' => 'img',
 'classes' => 'pure-img'],
 [
 'title' => 'Default Table',
 'selector' => 'table',
 'classes' => 'pure-table'],
 [
 'title' => 'Bordered Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-bordered'],
 [
 'title' => 'Table with Horizontal Borders',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-horizontal'],
 [
 'title' => 'Striped Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-striped'],
 [
 'title' => 'Striped Table tr',
 'selector' => 'tr',
 'classes' => 'pure-table-odd'],
 [
 'title' => 'Default Buttons',
 'selector' => 'a',
 'classes' => 'pure-button'],
 [
 'title' => 'Primary Buttons',
 'selector' => 'a',
 'classes' => 'pure-button pure-button-primary'],
 [
 'title' => 'Grids',
 'selector' => 'div',
 'classes' => 'pure-g'],
 [
 'title' => 'grid-u-x-5/24',
 'selector' => 'div',
 'classes' => 'pure-u'],
 [
 'title' => 'grid-u-sm-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-sm-1-2'],
 [
 'title' => 'grid-u-md-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-md-1-2']
 ];
 $arr['style_formats'] = json_encode($style_formats);
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

 

これでひとまず完了!

WordPressのビジュアルエディタTinyMCEの変な設定の表もこれで綺麗に作成できます。

 

あ~!....忘れていました。

 

TinyMCE Advanceで、スタイルボタンの追加と高度なオプション「CSS クラスメニューの作成」のチェックをしましょう!.....(‘◇’)ゞ

今度こそ、WordpressのビジュアルエディタTinyMCEが素敵に変身です。

めでたし、めでたし

 

追伸:

こんな感じが分かり易いのかなぁ~

 Responsive Images 画像に付ける 
 Default Table 縦線だけの表
 Bordered Table 罫線ありの表 
 Table with Horizontal Borders 横線のみの表 
 Striped Table ストライプの表
 Striped Table tr この行をグレー
 Default Buttons リンクのボタン
 Primary Buttons リンクのボタン★ 

ロリポップ(Lolipop)のレンタルサーバーでWordPressの高速化対策をやってみました

ロリポップで高速化の結果のPageSpeed Insights

ロリポップで運用中のWordpressサイトを高速化をしよう!!

なにかと性能を問題にされるケースのあるロリポップ(Lolipop)のレンタルサーバーですが、価格、利便性、稼働率において、他社と同等かそれ以上の魅力のあるレンタルサーバーであるからこそ、話題に上るのだと思います。今では、大手では当たり前となっているようですが、paperboy時代からお客様に見えない部分でサーバーの多重化や回線の多重化などしっかりとした運用をしている老舗なので、私はたまにお試しで浮気はしますが、ほぼロリポップ一本で運用しています。

安心してデータを預けられるレンタルサーバー。
月額100円(税抜)~容量最大400GBでWordPress簡単インストールなど
多彩な機能がついて、バックアップ機能も完備!
 

WordPressのホームページに高速化施策の結果。いきなり結果から

高速化したのは、このホームページです。pure.css導入のテーマで作っていますが、ちっとも高速ではない(実際CSSフレームワークは全体のうちの極僅かなので、高機能のCSSフレームワークを高速なCDNを利用して使用した方が全体的には高速になるかもしれません。)ので、自家製テーマなので、テーマ自身の高速化を含め対策した結果です。

まずは、GTmetrixの結果から

Pingdom Website Speed Testでも、

そして、Googleのモバイルサイトの性能測定 testmysite では、

さすがにサーバが混むと5秒位になることはありますが、アフィリエイト広告(PCページよりは1枚減らしてますが^-^;)とFacebookページありでこれは優秀だと自己満足しています。

どうです、これなら満足できる性能ではないでしょうか。

WordPressのホームページの高速化のための施策

テーマ自体の高速化は、使用するテーマにより変わってくるのでここでは詳細は省略します。(高速なCDNが存在するフレームワークやアイコンなどは、CDNから読む、使用していないheader情報は削除するなど)

お使いのテーマによっては、ここでの施策を自前で内蔵していたり、優れたソース(wordpressはダイナミックにhtml/cssを生成しますので、phpの書き方一つで随分とレスポンスが変わります。)など様々な工夫で高速化されたものも存在します。私がお客様サイトの作成のペースで使用することの多いで、「BizVektor」などもその1つです。(よく使うもう1つ「Lightning」も比較的高速ですが、標準テーマの範囲で作成されている為か、ここでの高速化施策で、改善できます。)

まず最初にすべきは、

今のホームページの分析ですが、Googleの「PageSpeed Insights」でチェックして、ファイルを置き換えましょう。

テスト結果で、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」と最適化されたデータを作成、ダウンロードすることができます。変更できるものは差し替えましょう。但し、2点注意が必要です。

  1. 共通の画像をモバイルもPCも使用している場合、圧縮画像のサイズを確認しましょう。PCではぴったりでもモバイルでは解像度が不足などの場合があります。
  2. ダイナミックにstyle.cssを生成するテーマの場合は、単純な差替えは有効でありません。場合によっては不具合の要因になるかもしれません。
  3. 画像読み込みにCDNを使う予定がある場合は、綺麗に見せたい画像は圧縮画像への置き換えは控えた方が良いと思います。CDN側でも圧縮しているのか画像の品質が低下する場合があるようです。

以下の様な項目で、対策状況と改善策を提案してくれますが、注意してダウンロードしたデータと差し替えると、「3.画像を最適化する」は改善されます。「4.CSSを縮小する、6.JavaScriptを縮小する」も若干改善します。差替えはFileZillaなどでftpで行います。

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  2. ブラウザのキャッシュを活用する
  3. 画像を最適化する
  4. CSS を縮小する
  5. HTML を縮小する
  6. JavaScript を縮小する
  7. サーバーの応答時間を短縮する
  8. リンク先ページのリダイレクトを使用しない
  9. 圧縮を有効にする
  10. 表示可能コンテンツの優先順位を決定する

プラグイン「WP Fastest Cache」「Fast Velocity Minify」により高速化しましょう。

高速化のプラグインは沢山ありますが、多機能すぎたり依存性が強かったりとしますので、できるだけ単純軽量で稼働実績も多いものを選びました。

これらを適切に設定することで、「PageSpeed Insights」の指摘の1項、2項、4項、5項、6項、9項が改善されます。

2項、9項は、「.htaccses」を手修正することでも対応可能ですが、静的な設定ですのでプラグインを使用しても負荷とはならないので、間違いの少ないプラグインで設定しちゃいましょう!設定は簡単!「WP Fastest Cache」をインストール・有効にして、以下のようにチェックを入れます。

WP Fastest Cacheの設定

このままでもいいですが、念のため、キャッシュのフラッシュの設定をしておきます。

WP Fastest Cacheのキャッシュを1日に1回リフレッシュ

次に、「Fast Velocity Minify」をインストール・有効にします。この状態で無条件HTML/CSS/JavaScriptの縮小・結合をしてくれますが、テーマの作りや使用しているプラグインによっては不具合が発生するかもしれません。(出来れば、ローカルに公開サーバー同等環境を用意して確認しておくのが良いと思います。)

「WP Fastest Cache」でもHTML/CSS/JavaScriptの縮小・結合は出来ますが、無料版では、元のソースを残していたり、不十分ですので、この部分は「WP Fastest Cache」と連携して動作する「Fast Velocity Minify」に任してしまいます。(WP Fastest CacheはFast Velocity Minifyを無効にするように警告しますが、Fast Velocity Minify側は問題ないとしている)※

※警告が出た場合、設定がセーブされませんので、「Fast Velocity Minify」無効の状態で、「WP Fastest Cache」を設定します。その後「Fast Velocity Minify」を有効にして、キャッシュのフラッシュも「Fast Velocity Minify」側でするようにすれば、問題はないようです。

これまでに記述したツールで評価結果をよくしたり、不具合を改善するためには、3カ所チェックします。

Fast Velocity Minify設定方法

あと、うまく動作しないテーマの場合は、「JS and CSS Exceptions」のIgnore Listに記載しましょう。例えば、

/wp-content/themes/%テーマ名%/style.css

こんな感じで記載します。「BizVektor」の場合だと、私の事例では、以下のようにすると不具合なく動作するようですが、殆ど高速化は見られないので、使用しない方が良いかもしれません。(お客様のサイトなので使用を止めました)

/wp-content/themes/biz-vektor/design_skins/001/001.css

最後にFixしているホームページなら無料の画像CDNを導入しましょう

画像限定のCDNの導入は簡単で、画像はサイトデータの多くを占めますので、高速化に大きく貢献しますが、注意が必要です。意識的にデータの削除は出来ませんし、URLさえわかればだれでもアクセスできますので、個人情報にかかわる写真や頻繁に差し替える画像を扱う場合は、使用を控えましょう。対象外設定も可能ですので、部分的に採用することも可能です。

WP Fastest Cache設定 CDN by Photon

「WP Fastest Cache」で「CDN by Photon」を設定します。CDN Url:はランダムは避けてどれか選びましょう。設定後暫くするとCDN経由で画像アクセスするようになります。

ファイルアクセスの状況を分析すると

「Pingdom Website Speed Test」のFile requestsを見ると、レンタルサーバーのDNS/SSL/Wait(Wordpressのジェネレーション時間?)で100ms~1秒まで変動します。この部分がレンタルサーバーの性能によって大きく変わる部分と思います。現状、通常500ms程度で、100ms以下の場合もあり、理想的な高速なサーバーであれば、0.4S程度反応が早くなるかもしれません。

File requests 結果

 

今後の課題

実は、「pagespeed」での測定結果が微妙なんです。PCでは90/100なんですが、モバイルが71/100と微妙な結果となります。モバイルのスコアをせめて80台にしたいと思っていますが、提案してくれる改善策は、限界でどうしたものか....サイト全体のCDN化は避けたいので、考え中....

 

その後

コメントに書いたようにCSSフレームワークとstyle.cssをインライン化、「WP Fastest Cache」と「Fast Velocity Minify」を正しい手順で設定(上記※)、画像CDNは使用したままで、「pagespeed」の完全なレポートでのスコアが、モバイル/パソコンともに98/100となり、一応の満足な結果となり、今後の高速化への施策も見えてきましたので、今回の追求はここまでとします。(facebookとgoogle Analyticsを無効とすれば、100/100

 

覚書・補足

SNS系のプラグインは、意外に重いので、できればテーマ内で処理したほうが良さそう(今後の課題:今後の弊社テーマ「pureframe」の残項目に追加)。今回は、「Seed Social」で対応、このプラグインは’the_excerpt’を書き込んでいるようなので、’get_the_excerpt()’の使用には注意が必要。

‘Crayon Syntax Highlighter’などテキストをスキャン、ハイライトしてくれるようなプラグインは大変見やすく利便性は高いのですが重いので、必要なページのみ有効とする等工夫が必要かもしれない。このプラグインに関わらず、’Contact Form 7’など使用しているページ以外に不要なものも同様に

WordPressで最新記事のリンクバナーを設置する。


WordPressで最新記事へのリンクバナーを付ける

WordPressで最新記事を表示するのにphpで簡単に実現でき、その方法を紹介したページはたくさんあります。 しかし、サイドバナーなどで、最新記事への直リンクバナーを作りたい場合は、WidgetのTxtボックスでは、通常PHPは動作しませんから、テーマに手を加えるか、プラグインを利用することになろうかと思います。 しかし、直リンクバナーにそのまま実現してくれるプラグインは見つかりません (あるのかもしれませんが、見つけられませんでした)。 そうなると、自作プラグインもありなのですが、ここではお手軽に枯れたプラグインを利用させて頂くことにしました。 「Latest Posts Template Widget」 日本人の方が作られたもののようですが、大変シンプルなので、これをお手軽改造させて頂きました。 プラグインをインストールして、プラグインの編集で、Widget.phpを開き、 タイトル部分と<ul><li>の部分を削除しちゃいます。

<?php echo $args[‘before_widget’]; ?>

<?php foreach ( $posts_latest as $post ): setup_postdata( $post ); ?>

<?php echo preg_replace_callback( ‘/\{(.+?)\}/’, array( $this, ‘_parse_template’ ), $instance[‘template’] ); ?>

<?php endforeach; wp_reset_postdata(); ?>

<?php echo $args[‘after_widget’]; ?>

こんな感じにしちゃう(抜粋)と ウィジェットに追加して、「<div class=”yyyyyyy”><a href={permalink}>The Least xxxxxxxx</a></div>」 表示数1とすれば、最新記事へのバナーの完成です。 .yyyyyy { 必要なCSS } で装飾すれば、様々なデザインにも対応できます。   追伸: まじめに改造するなら、本来の使用方法にも対応できるように、 タイトル入力がある場合とない場合で処理を分けるようにすると良いかと思います。 タイトルが空白の場合は、タイトル枠を表示しない、 もしくは、タイトルと要素を個別にcssコントロールできるようにして、 あとはcssでコントロールでも良いかもしれません。

WordPressのローカル開発環境を簡単に構築する方法


WordPressのローカル開発環境を簡単に構築

WordPressのホームページを作成したり、テーマ作成も実際のレンタルサーバー上でできなくもないですが、運用中や移設準備中だったりすると、ダーミーサーバーを構築して試したりとなります。 そんな時にやっぱりローカルで適用予定のサーバー上と同じことができれば、リスクなしにいろいろトライでき、ほぼ完全な形でサーバー上で公開できます。 ローカルでWordpressを動かすとなると様々な先人たちが比較的簡単に構築できるツールを公開して下さっていますが、ある程度専門的な知識を要求されたり、サーバーごとのリビジョン違いなどへの対応となるとなかなか難しいと思います。最近では、展開するだけでサーバーが構築できるinstantwordpressが登場してお手軽に試せますが、残念ながら、これはリビジョンが固定となり、2017年8月時点でphpは、最新の7ではありません。

そこで、おススメなのは、Windows版は最近リリースされたばかりですが、「Local by Flywheel」。これがなかなかの優れものです。このソフトをインストールして構築したいサーバー名と環境を選べば自動でローカルサーバーを構築してくれます。複数構築ができるので、サーバーごとに構築することで、いつでもネット上のサーバーと同じことを試すことが可能となります。 ホームページ作成・修正にあたり、ローカル画像・ファイルは、(書き換えてくれるようですが、念のため)相対パスで記載することだけ注意しておけば、Wordpressのプラグイン「All-in-One WP Migration」を使って、Export/Importで簡単にローカル環境とインターネット環境が相互に適用できます。