ブログはじめ:No.03 Simplicityの設定

WordPressのテーマの設定について記載致します

テーマについては、ただのデザインテンプレートのようなものと思い、
見た目を重視して探してみてたのですが、
SEO(検索エンジン最適化)対策がされているデザインテンプレートがあると知り、
やはり記事を書くとなると、閲覧数が増えてモチベーション向上につなげたいため、
SEO対策が施されたテンプレートを調べました

SEOについては以下のサイトで説明されています

このブログもいつまで続くかわからないため、
無料のものを探していたところ、”Simplicity”が一番マッチしていたため、
導入を決定しました

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

個人的に気に入ったところは、シンプルが故に何も考えずに始められそうというところと、
SEO対策対応が謳われているところです

以降は導入の過程を記載していこうと思います。

スポンサーリンク
スポンサーリンク

プラグインの導入

Simplicityをダウンロード後、適用しました。
また、子テーマも同時に適用しています。
(以降は子テーマの編集となります)

まずはプラグインの導入です

設定内容、導入するプラグインについては以下ページを参考にしました

人気のWordPressテーマ「Simplicity 2」でブログを初める際にやっておくべき基本設定をまとめています。

その中で高速化の方法についてはこの後記載いたします

スキンの導入 ※ここでハマる。。。

Simplicityに対応したスキンを検討したところ、
以下のスキンが一番気に入ったので導入いたしました

「simple-ultramarine」です
見やすく色合いも良いため、いい感じなのです。

ダウンロードし、サーバの以下に配置しました
(WordPressをサブディレクトリ”wp”にインストールした場合です)

/home/”名前”/”ドメイン名”/public_html/wp/wp-content/themes/simplicity2-child/skins

ここでハマりました、、、

導入後しばらくサイトを触ってたのですが、
いつの間にかブラウザの鍵マークが正常を示す緑色ではなくなっていました

いろいろ調べたのですが、ChromeのF12を押すことで表示する、コンソール機能から
原因がわかりました。

どうも、スキンの部品を上記の作者様のページから落としてくるようなのですが、
作者様のサイトがSSL暗号化されておらず、不完全な設定とブラウザ側で判断されたようです
※作者様、すでに対応されていたら申し訳ございません
「simple-ultramarine」は断念し、「simple-black」を導入しました

作者様にご対応いただき、現在は問題なく常時SSL化できております。
ご対応いただきありがとうございました。

Wordpressテーマ「Simplicity2」のシンプルな黒系のデザインスキンを作ってみました。

こちらは問題なく、ブラウザの鍵マークは緑色になりました

高速化の方法:.htaccess

Simplicity様で紹介されていた高速化の設定を.htaccessに追加しました

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。 高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。 たったこれだけのことですが、かなりの高速化が図れます。 例、Simplicit

サイトの速度計測は、Simplicity様のサイトで紹介されていたサイトを利用しました

体感は変わらないので効果は実感できておりませんが。。。

今回の説明は以上ですが、
以下に私が設定した.htaccessの設定を記載します

常時SSL化のためのリダイレクト設定も追加しているのでご注意ください

常時SSL化については以下をご参照ください

ブログはじめ:No.02 Wordpress常時SSL化
SEOに重要な、Wordpress常時SSL化について説明します

.htaccess設定例

※常時SSL化のためのリダイレクト設定も追加しているのでご注意ください

”サイトのドメイン”についてはご自身のサイトのドメインに変更してください

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://”サイトのドメイン”/$1 [R=301,L]
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
# 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>

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

コメント

  1. けんじ より:

    初めまして、キャンディースタイル運営者のけんじです。
    simple-ultramarineの背景画像のパスが、私のサーバーになっているのが原因だと思います。自作のテーマで運営してましたので、SSLの不具合に気付きませんでした。

    読み込み動作も遅くなるので、スキン内のURLを削除してください。
    お手数ですが、アップした画像にパスを与えるか、カスタマイザーから変更してください。原因が私のサイトからで申し訳ないです。
    指摘有難うございました、変更しておきます。

    • itnandemo より:

      けんじ様
      コメントいただきありがとうございます。
      また、SSLのご対応もいただきありがとうございました。