WordPressのカスタマイズ内容

2020年6月9日

WordPressのカスタマイズ内容をまとめています。当サイトの管理を目的とした備忘録ですが、参考になれば。ちなみに、WordPressテーマはLuxeritasを用いています。

スポンサーリンク

インストール済みプラグイン

以下の8種類のプラグインを利用中です。各プラグインの説明は、「プラグイン」－「インストール済みプラグイン」画面の記載情報を転記しました。

  • Akismet Anti-Spam (アンチスパム)
    何百万もの利用実績がある Akismet はあなたのブログをスパムから保護する最良の方法といえるでしょう。このサイトでの設定は完了しており Akismet が常時保護しています。
  • Contact Form 7
    お問い合わせフォームプラグイン。シンプル、でも柔軟。
  • Contact Form 7 add confirm
    Contact Form 7プラグインに確認画面をつけるプラグイン
  • Duplicate Post
    投稿やページを複製します
  • EWWW Image Optimizer
    NextGEN Gallery や GRAND Flagallery を含む WordPress 内の画像のファイルサイズを縮小します。 jpegtran, optipng / pngout, および gifsicle を使用しています。
  • Google XML Sitemaps
    This plugin improves SEO using sitemaps for best indexation by search engines like Google, Bing, Yahoo and others.
  • SiteGuard WP Plugin
    SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができます。SiteGurad WP Pluginは、管理ページとログインに関する攻撃からの防御に特化したセキュリティプラグインです。WAF ( SiteGuard Lite )の除外ルールを作成する機能もあります。( 使用するにはWAFがWebサーバーにインストールされている必要があります )
  • TinyMCE Advanced
    WordPress ビジュアルエディター TinyMCE の高度な機能とプラグインを有効化します。

作成されるサムネイルのサイズ設定

「メディア」－「新規追加」画面において画像をアップロードした際に、不要なサムネイルが大量に作られないようにするための設定です。

メディア設定

大サイズの画像（1024×1024）は使わないので、「設定」－「メディア」において、「大サイズ」の幅と高さを0にします。

サムネイル管理の設定

「Luxeritas」－「管理機能」－「サムネイル管理」タブにおいて、作成しないサムネイルのチェックを外します。なお、「Large size」にチェックが付いていますが、サイズが「0 x 0 px」なので作成されません。それ以外の7種類のサムネイルが作成されます。

当サイトは画像フォーマットのWebPへの対応もしていますので、実際に作成されるファイル数は7×2＝14ファイルになります。凄い数ですね…。もっと減らしてもいいのかな?

EWWW Image Optimizerの設定

念のため、「設定」－「EWWW Image Optimizer」－「リサイズ」タブにおいて、large – 0x0の最適化と作成を無効化しています。

CSSへの追記（style.css）

「Luxeritas」－「子テーマの編集」－「style.css」タブへの追記内容です。

TinyMCE Advancedのテーブルのカスタマイズ

当サイトはTinyMCE Advancedのテーブルを用いていますが、デフォルトの文字サイズが大きいので、14pxに変更しました。また、テーブルのヘッダ行の背景色をペールブルー（#e7f5fe）に変えました。

/* テーブル */
table {
    font-size: 14px;
}
.post th {
    background-color: #e7f5fe;
}

固定ページの不要フッターの消去

固定ページのフッターから、meta-boxとhr（サンプルを以下に示します）を消しました。

フッターのmeta-boxとhrのサンプル
/* 固定ページの不要フッターの消去 */
.page .meta-box,
.page hr {
    display: none;
}

注記のスタイルを作成

「リスト」を作った際に、「❈ 記号」を用いた注記ができるクラスを用意しました。<ul class="notes">のように用います。

/* 注記 */
ul.notes {
    list-style-type: none;
    margin-left: 14px;
}
ul.notes li:before {
    content: '\02748';
    margin-left: -14px;
}

サイドバーのプロフィール用のスタイルを作成

このスタイルについては、他サイトの記事「テーマLuxeritas(ルクセリタス)でサイドバーにプロフィールを表示する」を参考にしました。

“xxxx_250x250.png" の部分は、お使いのプロフィール画像のurlに置き換えてください。当サイトでは、縦横250pxの画像を用いています。

/* プロフィール */
.widget-profile {
    max-width: 336px; /* サイドバーの横幅 */
    margin: auto;
    padding-top: 270px; /* プロフィール画像の縦サイズより長く */
    background: url(xxxx_250x250.png) top center no-repeat;
}

CSSへの追記（AMP用スタイル）

「Luxeritas」－「子テーマの編集」－「AMP用スタイル」タブへの追記内容です。上に示した「CSSへの追記（style.css）」の内容に加えて、AMP用のスタイルとして以下を設定しています。

図の見出しのスタイル設定

AMPページには図の見出し（figcaptionタグ）のスタイルが設定されていなかったので、非AMPページと同じスタイルを設定しました。非AMPページのスタイルは、Chromeの「デベロッパーツール」で確認しました。

/* 図タイトル */
.wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
    color: #555d66;
    text-align: left;
    font-size: 13px;
}

.htaccessの編集

修正ポイントは以下の3点です。

WebP対応のコードの追記（その1）

「設定」－「EWWW Image Optimizer」－「WebP」タブの最下に示されているコードを.htaccessの先頭に挿入します。コードは、EWWW Image Optimizerのバージョンによって異なる可能性があります。以下のサンプルは、バージョン 4.9.2のものです。 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

高速化一括設定のコードの追記

「Luxeritas」－「高速化一括設定」－「高速化用htaccess」タブに示されているコードを.htaccessの最後に追記します。コードは、Luxeritasのバージョンによって異なる可能性があります。以下のサンプルは、バージョン: 3.6.12.2のものです。

# 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/json "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/json
	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-woff
	#AddOutputFilterByType DEFLATE application/x-font-woff2
	AddOutputFilterByType DEFLATE application/x-font-opentype
	#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

WebP対応のコードの追記（その2）

#MIME Typeごとの設定に次の1行を追記します。私は、ExpiresByType image/png “access plus 1 weeks" の次の行に挿入しました。

	ExpiresByType image/webp "access plus 1 weeks"

function.phpの設定

「Luxeritas」－「子テーマの編集」－「function.php」への追記内容です。

「お問い合わせフォーム」からのページ遷移の記述

「お問い合わせフォーム」で送信ボタンを押した際に、「送信が完了しました」ページへ遷移させるためのコードを追記します。(thanksページのURL)の部分に、「送信が完了しました」ページのURLを記載します。

add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = '(thanksページのURL)';
}, false );
</script>
EOD;
}

サイトマップからの特定記事の除外

「送信が完了しました」ページ（固定ページ）をサイトマップに表示させないようにするために、sitemap.phpを1行修正します。

sitemap.phpは親テーマのフォルダにありますが、それを子テーマのフォルダにコピーし、コピーしたファイルに対して修正を行います。

詳細な手順については、こちらのサイトを参考にしました。

最後に

WordPressや、利用中のテーマ「Luxeritas（ルクセリタス）」の設定やカスタマイズ内容に関する備忘録でした。

インストールした直後から、デフォルトの設定を変えた箇所については全てを記録しておくと何かと役に立つのですが、使い始めてしばらくしてからの備忘録になっているので、取りこぼしがあるかも知れません。

これからもマメにメモしていきます。

スポンサーリンク

雑記帳Luxeritas,ルクセリタス,カスタマイズ,WordPress,高速化

Posted by リライフ・ノーツ管理人