MENU
WordPress

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定

swallow 1 - 【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定

当サイトでは以前、WordPressテーマはOPENCAGE社のスワローを使用しており、プラグインやサーバーの設定で高速化対策を実施していたのでその内容を記してあります。

スワローを既に使用している、もしくは今後使用することを検討している方は恐らくスワローのシンプルで高速な仕様に魅力を感じている方が多いかと思います。僕自身、スワローのスッキリしたレイアウトと機能性が高いところが好きで購入しました。

そこで、この記事ではスワローの性能を最大限活かすべく、スワロー導入後にやるべきWordPress高速化対策とレイアウトなどのカスタマイズ設定を誰でも簡単にできるようにご説明していきます。

スワローは素晴らしいWordPressテーマですが、そのまま使用するだけだと機能性を活かせないので是非この記事を参考にしてみてください…!

また、以前は別サイトでストークも同じ様にカスタマイズしていましたので、基本的にはストークでも同様に高速化できるかと思います。(仕様もかなり似ていますし) 

ちなみに、当サイトの表示速度をGoogle公式ツールの「PageSpeed Insights」で測定した結果はこちらです。まだ改善の余地はありますが、モバイルで80点付近であれば十分及第点と言って良いのではないかと思います。

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定カスタマイズ後

PageSpeed Insightsはキャッシュ系プラグインの設定が正しくできていないと上手く測定できない場合もありますので、その際はこちらのサイト速度測定ツールをご使用ください。

・サイト速度測定ツール「GTmetrix」

また、こちらは当サイトの使用環境をまとめた表となります。使用環境が近い方がカスタマイズ後の性能を再現しやすいので事前にご確認いただければと思います。

 スワローの使用環境
WordPressWordPress 5.2.2 
MySQL5.7
PHPPHP7.2.17
サーバXサーバー
(【有効】Xアクセラレータ Ver.2、サーバキャッシュ、ブラウザキャッシュ)

 

スワロー/ストークの高速化設定(サーバー&プラグイン)

この項目ではスワロー/ストークを使用したWordPressサイトを高速化するための設定方法をご紹介します。

と言いましても、内容としては一般的なサーバーの高速化機能と、実際に僕が使用してみてスワローと相性の良かったプラグインのご説明となります。特にプラグインはWordPress環境やテーマに影響を受けるので、上記で紹介した僕の環境と近い方は効果を得やすいと思います。

しかし、場合によってはプラグインとの相性が悪い場合もありますので、必ずバックアップを取得してから設定を行うようにしてください。

サーバーの高速化機能を使用

最近のレンタルサーバーでは高速化機能が搭載されている場合も多いです。ここでは多くの方が使用されているであろう”Xサーバー”の高速化機能の設定をご紹介します。

Xサーバーでは以下3つの高速化機能がデフォルトで設置されています。(本当にありがたい…!)

・Xアクセラレータ(CSSや画像ファイルなど静的ファイルの高速化)
・サーバキャッシュ
・ブラウザキャッシュ

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
 
これらの項目は「Xサーバ > サーバパネル > 高速化」からそれぞれ設定を行います。ここでは例としてXアクセラレータの設定を行います。
 
【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
 
WordPressを設置しているドメインで「選択する」に進んでください。
 
【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
 
Xアクセラレータ設定で現時点で最新のバージョンを選択して「確認画面へ進む」と進めば設定は完了です!
※ 2019年11月にXアクセラレータ Ver.1 → Ver.2 に変更しました。

サーバキャッシュとブラウザキャッシュも同様に簡単にできますので、是非設定してみてください。

プラグインによるWordPress高速化

サイト表示速度は以下3つの要素に大きく影響を受けます。

①画像読み込み
②ソースの記述内容(HTML、CSS、JavaScriptなど)
③キャッシュ利用

この項目ではプラグインを用いて全ての対策を行っていきます…!

ちなみに「①画像読み込み」の対策は実はとても簡単です。表示ページの画像読み込みを遅らせる「Lazy Load」と自動的に画像サイズを圧縮してくれる「EWWW Image Optimizer」という鉄板のプラグインを入れておけば対策は万全です。

EWWW Image Optimizer, WebP
【画像で解説】EWWW Image OptimizerでWebPを設定する方法この記事では『EWWW Image Optimizer』を用いてGoogleも推奨している次世代の画像フォーマットである『WebP(ウェ...
lazy load - 【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法この記事ではサイト高速化プラグイン「Lazy Load by WP Rocket」をご紹介します。 Lazy Load(遅延読み込み)...

しかし、後半の2つについては相性の悪いプラグインを入れてしまうとWordPressに不具合を生じさせたり、レイアウトを崩すケースも多く、どのプラグインを入れていいか悩んでいる方も多いと思います。

そこで、僕がコード最適化やキャッシュ系プラグインを一通り試し、スワローで最も性能が良かった組み合わせである「Autoptimize」と「Cache Enabler」を別記事でご紹介していますので、スワローをご使用の方は是非参考にしていただけたら嬉しいです…!

また、どちらもシンプルで使用しやすいプラグインなので、他のテーマを使用している方も試してみる価値は十分にあると思います。

autoptimize cache enabler e1581331367430 - 【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法WordPressは高機能で便利な反面、サイトが重くなりやすいという欠点もあります。 しかし、Googleは"Webmaster Ce...

これらのプラグインを設定すれば基本的にはWordPressの高速化対策は十分です。

ただし、「PageSpeed Insights」でスコア100点を本気で取りにいくつもりであれば、表示回数の多いサイトヘッダーの画像サイズを小さくしたり、CDN(Contents Delivery Network)の導入を検討してみるのも良いですね。

ここで、CDNとは各地域に設置してあるキャッシュサーバを利用してどこからのアクセスでも素早くレスポンスを返す仕組みのことです。例えば、Netflixは全世界から動画視聴のアクセスが大量に来るので、CDNを利用してユーザーのアクセス元に近いサーバでレスポンスを返すことで大量アクセスを捌いています。

スワローのカスタマイズ設定

ここからはスワローの詳細なカスタマイズ設定をご紹介します。

ただし、公式サイトのマニュアルに掲載してある内容は省き、個人的に必要だと思ったカスタマイズをご紹介していきたいと思います。(多少被っていたらすみません。笑) 

※ ここからはスワローに特化した内容も多いので、ストークをご使用の方はそのまま使用できない場合もあることにご注意ください。

TOPページ 記事抜粋文の削除

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
 
あくまで個人的な意見ですがスワローはシンプルでムダのない所が良いのであり、TOPページの記事抜粋は無い方がすっきりして綺麗だと思います。また、抜粋文があると本当に読んで貰いたい箇所である記事タイトルやプロフィールなどが目立たなくなるので、やはり削除した方が良いですね。

こちらはカード型で抜粋文を削除した後の画像です。

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定

抜粋文がなくなり全体的にスッキリとした印象になりました。小さいことではありますが、このような改善の積み重ねが大事だと思います…!

それではここからは抜粋文の削除のやり方をご説明していきます。

スワローの子テーマを導入する

子テーマはテーマファイルをカスタマイズする際に使用します。

仮に親テーマがをアップデートして内容が変更しても、子テーマに記載したソースコードは無くならないようになっています。つまり、カスタマイズ部分を別途で管理するために使用するものです。

こちらについては導入手順が公式サイトで紹介されていますのでそちらをご参照ください。

スワローの子テーマ導入手順はこちら

親テーマから子テーマに編集ファイルをコピーする

親テーマの管理フォルダから記事一覧についての該当ファイルをDL&編集した後、子テーマの管理フォルダにアップロードします。

ファイルのやり取りはWindowsであればFFFTP、MacならCyber duckというソフトが使いやすくてオススメです。テーマに関するファイルは以下フォルダに格納されています。

■テーマに関するファイル
/ドメイン名/public_html/wp-content/themes
 
■親テーマフォルダ
/ドメイン名/public_html/wp-content/themes/yswallow
 
フォルダ内の自分が使用している記事表示型ファイルをDLする。
 
・カード型:parts_archive_card.php (上記の参考写真はカード型なのでこちら)
・シンプル型:parts_archive_simple.php
・ビッグ型:parts_archive_big.php
 
■子テーマフォルダ
/ドメイン名/public_html/wp-content/themes/yswallow_custom

 親テーマフォルダからDLしたファイルをテキストエディタで開き、以下コードを削除して子テーマフォルダにアップロードしてください。

<div class="description"><?php the_excerpt(); ?></div>

 上記コードを削除すると記事一覧で抜粋文が表示されなくなります。編集後も表示が変わらない場合はブラウザキャッシュを削除してみてください。

プロフィール

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定スワローにはプロフィール用のショートコードは存在しないため、必要であれば自分で「外観 > ウィジェット」からサイドバーなどにプロフィールを作成する必要があります。

でも、ゼロから作るのは多少時間もかかりますしめんどうですよね…。笑

そこで、参考としてこのブログのサイドバーで使用しているHTMLコードを記載します。使用する場合は文字サイズやレイアウトなど微調整していただければと思います。

<div align="center">
 
<img src="★画像URL★" alt="profile" width="180" height="180" />
 
<span style="font-size: 1.25em;"><strong>★氏名★</strong></span>
 
</div>
<div align="left">
紹介文
<span style="color: #000000;"><strong>
仕事内容</strong></span>
・〜〜〜
・〜〜〜
</div>

【追加CSS】文字の蛍光下線

ブロガーさんの中には文字に蛍光ペンのような装飾を使用している方ってわりと多いですよね。WordPressテーマによってはショートコードで蛍光の装飾が入っていたりしますが、スワローには無いため使用する場合は設定する必要があります。

ちなみにこちらでご紹介する蛍光装飾の出来上がりはこのようになります!

設定方法として以下2点を順番に解説していきます。

①追加CSSにコードを追記する
②記事投稿画面でタグを使用する 

追加CSSにコードを追記する

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定
「外観 > カスタマイズ > 追加CSS」に以下コードを記載し保存してください。

.keiko_yellow {
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%);
}

記事投稿画面でタグを使用する

記事投稿画面で使用する際は装飾したい文字に以下タグを使用してください。プラグインのAddQuicktagに入れておくとすぐに使えて良いですね!

<span class="keiko_yellow">★装飾したい文字★</span>

スワローの高速化&カスタマイズまとめ

【WordPress】スワロー/ストーク導入後にやるべき高速化&カスタマイズ設定スワローは比較的高速なWordPressテンプレートとは言え、他テンプレートと同様にデフォルトのままだとその性能を十分に活かすことはできません…!きちんと必要なプラグインを設定してこそスワローのメリットが活かせます。

また、軽くてシンプルな作りのためデフォルトのショートコードには余計なものが無い印象です。そのため必要に応じて追加CSSを活用していきましょう!

デザインはとてもスッキリしていて記事やプロフィールなどをユーザーにアピールしやすいと感じています。もっとオシャレなテンプレートは他にもありますが、大抵は一点物なのでレイアウトやカラーを変えるとバランスが悪くなってしまうものも多いです。

その点を踏まえても、スワローは機能性・デザインともに優れたテンプレートだと言えると思います。今使っているテンプレートの変更を検討している方は是非スワローも候補に加えてみてはいかがでしょうか?

スワローの公式サイトはこちら

 

PC1台で自由なライフスタイルを実現する無料メルマガ

『ブログ×外注化』で月40万円を稼ぎ、独立起業するための思考や情報を学ぶメールマガジン
無料登録はコチラ
ブログで月40万円を稼ぎ、自由なライフスタイル目指す無料メルマガ
登録はコチラ