WordPressテーマSTORKの設定についての備忘録


スポンサーリンク


スポンサーリンク



 

ブログのデザインが、ようやく落ち着いてきました。

こんにちは。あだじょぱです。

WordPressのテーマを、無料のSimplicy2から有料のSTORKへと変更し、初期設定は完了したものの、納得のいかない部分は少しずつ修正をしていました。

初心者がSimplicity2からSTORKへの変更でやったこと

2017.08.10

 

Simplicity2は、シンプルなデザインが特徴のテーマでしたが、STORKは洒落た感じになっているので、細かい部分のデザインを引き継ぐのに違和感があったんです。

 

 

初期設定後の修正

 

WordPressの管理画面から項目を選んで変更できる点は、殆ど自分の好きなように設定しましたが、それでもまだ不満点が幾つかありました。

  • ロゴ画像のサイズ
  • 標準の吹き出し機能
  • 標準のフォント
  • ショートコード
  • サイトの表示速度

 

この通り、デザインを優先した事で、Simplicity2では何もしなくても対応されていた部分も、STORKでは手を加える必要がありました。

 

 

ロゴ画像の大きさを変更する

 

WordPress管理画面からカスタマイズでも、タイトルロゴ画像の大きさはそこまで大きく出来ません。

嫌いじゃないよ その仕様。

しかし、ただでさえ細々と書いている弱小ブログとしては、誰も見ないかも知れないとは思いながらも、もう少しタイトルを大きくしたいという謎の欲求が湧いてきました。

結論から書くと、テーマの編集でスタイルシートにCSSを追加で記述しないと解決しないっぽい。

やはり、初心者とはいえ、CSSは避けては通れない道なのか・・。

@media only screen and (min-width: 768px) {
 #container #logo img{
 max-height:initial;
 }
}

ロゴ画像を大きくする為の記述を、子テーマのスタイルCSSに追加しました。

ロゴが画像の場合は、これでOKだとSTORK公式サイトにあったもの。

スマホからのアクセスでは、変化しないようなスタイルです。

同じリンク先には、トップページのヘッダー下に表示される「お知らせ」の背景色変更についても書かれているので、活用できます。

 

 

吹き出しの表示が崩れないように

 

STORKの良いところとして、プラグインを使わなくても、画像付きの吹き出しが使えるというのがあります。

 

鼻毛
こんな感じ
おじさん
右にも表示できるよ

 

吹き出しの種類や、画像の枠の色は、変更ができるようになっています。

この吹き出し機能が、分かり易く楽しくて、つい使いたくなってしまうんですが、AMPページでは表示が崩れて上手く機能しないという問題がありました。

同じような吹き出しを使えるプラグインもありますが、こちらも暫く更新が止まっていて、AMPには対応していないので、なんとか既存の吹き出しを使えるようにしたいと思いました。

これまた、テーマの編集なのです。

 

// AMPプラグインにCSSを追加する
add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
function xyz_amp_additional_css_styles( $amp_template ) {
?>/*CSSここから*/
 
body {
  font-family: Arial, Helvetica, 游ゴシック, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.clearfix, .cf, .comment-respond,.widget ul li {
zoom: 1; }
.clearfix:before, .clearfix:after, .cf:before, .comment-respond:before, .cf:after, .comment-respond:after ,.widget ul li:before ,.widget ul li:after{
content: "";
display: table; }
.clearfix:after, .cf:after, .comment-respond:after, .widget ul li:after {
clear: both; }

.voice{
	margin:1em 0 1.3em;
	font-size:0.95em;
}

.voice .voicecomment{
	border:3px solid #eee;
	background-color: #fff;
	color: #444;
	padding: 2.5%;
	position:relative;
	width:78%;
	border-radius:5px;
}
.voice.l .voicecomment{
	float:right;
}
.voice.r .voicecomment{
	float:left;
}

.voice.l .voicecomment:before{
	content: '';
	position: absolute;
	border-right: 8px solid #eee;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 10px;
	left: -11px;
}
.voice.l .voicecomment:after{
	content: '';
	position: absolute;
	border-right: 10px solid #fff;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 10px;
	left: -7px;
}
.voice.r .voicecomment:before{
	content: '';
	position: absolute;
	border-left: 8px solid #eee;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 10px;
	right: -11px;
}
.voice.r .voicecomment:after{
	content: '';
	position: absolute;
	border-left: 10px solid #fff;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 10px;
	right: -7px;
}
.voice .voicecomment p{
	margin-bottom:1em;
}
.voice .voicecomment p:last-child{
	margin-bottom:0;
}
.voice .icon{
	width:12%;
	text-align:center;
}
.voice.l .icon{
	float:left;
}
.voice.r .icon{
	float:right;
}
.voice .icon img{
	border-radius:50%;
	margin:0;
	border: 4px solid #f5f5f5;
}
.voice.icon_red .icon img{
	border-color: #FF4E4E;
}
.voice.icon_blue .icon img{
	border-color: #50B4DE;
}
.voice.icon_yellow .icon img{
	border-color: #faee00;
}
.voice.icon_black .icon img{
	border-color: #222;
}
.voice .icon .name{
	font-size: 0.65em;
	padding:0.4em 0;
}
.voice.l.fb .voicecomment:before{
	border-right-color: #4C5CB0;
}
.voice.l.fb .voicecomment:after,
.voice.l.line .voicecomment:after{
	content:none;
}
.voice.fb .voicecomment{
	background: #4C5CB0;
	border-color: #4C5CB0;
	color:#fff;
}
.voice.r.fb .voicecomment:before{
	border-left-color: #4C5CB0;
}
.voice.r.fb .voicecomment:after{
	content:none;
}
.voice.line .voicecomment{
	background: #7ACC40;
	border-color: #7ACC40;
	color:#fff;
}
.voice.l.line .voicecomment:before{
	border-right-color: #7ACC40;
}
.voice.r.line .voicecomment:before{
	border-left-color: #7ACC40;
}
.voice.r.line .voicecomment:after{
	content:none;
}
 
/*CSSここまで*/
 
<?php
}

 

上記をfunctions.phpに記載して対応。

こちらも、公式サイトに記載があったものを利用しました。

この記述は、子テーマにfunctions.phpコピーして、子テーマの編集で追加記載しました。

 

 

 

標準のフォントを変更

 

ブログを書く上では、管理者からすれば、訪問して頂いた方々に読んでもらう訳ですから、読みやすい文字にしたいと思うのは当然だと思います。

Simplicity2を使っていた時は、メイリオに設定していましたが、アクセスする端末によっては、表示が変わる内部フォントだったので、こちらが思ったように表示されていないケースもあったようです。

そこで、今回は端末で差が出ないWebフォントを使用してみる事にしました。

やっぱり、CSSです・・。

/* フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
 
body {
     font-family: 'Sawarabi Gothic', sans-serif;
     font-size: 100%;
}

 

この記述をスタイルCSSへ記載しました。

さわらびゴシックというフォントの場合です。

Webフォントには、種類があるので、記述を変更することで、お好みのフォントに出来ます。

 

 

ショートコードを使い易く

 

STORKで吹き出し機能を使う際は、ショートコードを打つ必要があります。

これが、結構面倒なんですよ。

そこで、プラグインのAddQuicktagを導入して作業を簡略化しました。

 

AddQuicktagは、予め頻繁に使うショートコードを登録しておけば、クリックするだけで希望のショートコードが1発で記述されるので、STORKとの相性抜群なプラグインです。

よく使うショートコードを登録しておきました。

登録の手順は簡単。

WordPressの管理画面から設定でAddQuicktagの設定画面へ移動し、ショートコードの開始と終了を入力するだけです。

 

 

サイトの表示速度を高速化する

 

Simplicity2からSTORKへテーマを変更して、サイトの表示が遅くなったような気がしました。

シンプルなSimplicity2に対して、デザイン性の高いSTORKは重いのかもしれません。

速度計測が可能なサイトで速度を調べたところ、以前よりもかなり悪い・・。

このあだじょぱこたんは、XSERVERという高機能なサーバーを利用しているので、XSERVER側でもサーバーを新しいタイプに移行したり、PHPのバージョンを変更する対策は利用済みです。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

 

そこで、今回は新たにプラグインでの対策と、.htaccess に記述する方法で対処してみました。

 

 

プラグイン BJ Lazy Load の導入

 

 

Simplicity2の時は、テーマ側で設定が可能だったと思いますが、サイトを開く際に、画像を読み込むタイミングを少し遅らせる事で、転送量を減らし速度向上が見込める機能。

STORKの設定には無いので、プラグインを導入しました。

普通にインストールすると英語表示になりますけど、日本語化する為のファイルもあるので、利用しています。

このプラグインで、画像表示を遅延させる事が可能です。

 

 

プラグイン WP-Optimize の導入

 

WordPressを使用していると、当然ですがサーバー内にデーターを保管していきます。

保管されたファイルの中には余分なデーターも混じっている為、何もしないでいるとサイトが重くなる原因に繋がる可能性があります。

WP-Optimizeというプラグインは、そんな余分なファイルを削除し、データーベースを綺麗に掃除してくれるプラグインです。

なぜか、よくわからない安心感がありますね。

 

 

プラグイン WP Fast Cache の導入

 

 

最後は、表示を高速化する上では最も利用されているであろうキャッシュ系のプラグイン。

実は、キャッシュ系のプラグインは複雑で、思わぬ不具合が発生することもあるみたいです。

ですから、利用するのは悩んだんですが、表示速度が悪い数値だったので、Simplicity2の時に利用したことのある使い慣れたWP Fast Cacheならとインストールしました。

キャッシュ系のプラグインは多く存在しているので、どれを使うかは好きに選べますけど、このWP Fast Cacheは、初心者にも優しい使い易さだと思います。

キャッシュの削除も簡単なので、最悪の場合は、プラグインを停止か削除するとして、高速化優先で導入してみましたが、今のところ問題なさそうです。

 

 

サーバーの .htaccess に記述追加

 

出来る事は、全部やってみようということで .htaccess というファイルへの記述で対処する方法も実行してみました。

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

 

長いですし、何の事やら分かりませんが、記載すると速度の測定値が若干改善していました。

上記の記述は、Simplicityのページを参考にしたものです。

これは、XSERVERだとサーバーパネルから .htaccessの編集が行えるので簡単でした。

 

 

まとめ

 

Simplicity2からSTORKに変更って、意外とやる事いっぱいあって大変そう。

と思われそうな内容になってしまったかもしれませんが、最初に設定してしまえば、後は大変な作業は無いので、安心して下さい。

ショートコードが便利なので、AddQuicktagは導入をオススメしておきます。

AMPページを作成しないのであれば、吹き出しの機能について書いた部分は、スルーしても問題なく使えます。

現時点では、トップページのレイアウトはカード型ですが、アドセンスのインフィードを導入すると、デザインが損なわれるので配置していません。

入れるのなら、シンプルなレイアウトの方が良いと思います。(見た目)

サイト表示の高速化は、トップページにスライドを挿入している為か、何もしない状態では遅くて測定値もかなり低い数値になっていました。

全ての対策を施すと、数値が激変して爆速ではありませんが、かなり改善されました。

環境によっても違いが出ると思いますが、プラグインを多用する事になって、重くなったというのもあるんじゃ無いかと。

とりあえず、これで設定完了という事にします。


スポンサーリンク


スポンサーリンク





コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

大阪から札幌への移住者。二度の移住でトータル15年ほど。 会社は早期退職。仕事やプライベートで北海道全域を走破。 趣味はGuitarとCamera。どちらも未熟である。  HM/HRと綺麗な素敵レデーをこよなく愛す。怪しい者ではない。