当サイトの構成

2021-07-14

 当サイト(https://doc-sin.life)のインフラレイヤーの構成やデフォルトから変更しているファイルやパラメーターの値、インストールしているプラグインなどを纏めています。

Overview

Domain

 ドメイン doc-sin.life は お名前.com で取得・管理している。
 ドメイン名の由来についは下記の記事を参考ください。

CloudFront

 CloudFront は Lightsail でサポートされているものを使用しています。

 SSL の終端は CloudFront で、CloudFront – Lightsail 間は HTTP 通信となっている。それによるプロトコルの不一致による不具合を後述するプラグイン「SSL Insecure Content Fixer」で解消している。

Lightsail

 Wordpress(SingleSite) から作成しています。詳細は以下の記事を参考ください。

WordPress

Thema

 Luxeritas (公式サイト)を使わせて頂いております。以下はデフォルトから変更している箇所のみ記載しています。
 Luxeritas のアップデート方法は下記を参考ください。

style.css

Headline 及び画像ギャラリーの CSS 調整のため下記を末尾に追加しています。

/* for headline */
.post h2 {
  padding: 1rem 2rem;
  border-left: 5px solid #FFCC33;
  border-bottom: 3px solid #FFCC33;
  background: #FFF8DC;
}

.post h3 {
  padding: 1rem 2rem;
  border-left: 3px solid #FFCC33;
  border-bottom: 1px solid #FFCC33;
}

/* for Gallery thubmail css in article */
.blocks-gallery-grid, .wp-block-gallery {
    padding: 0 0 0 0px !important;
}

/* for side widgets */
.google_iframe{
	position:relative;
	width:100%;
	height:0;
	padding-top:75%;
}
.google_iframe iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

functions.php

webp ファイルのアップロード及びサムネイル表示のため下記を末尾に追加しています。

/** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

/* for webp thumbnail in wb-admin */
add_filter( 'manage_media_columns', function( $columns ) {
    echo '<style>.media-icon img[src$=".webp"]{width:100%;}</style>';
    return $columns;
} );

/* 不要な css の読み込み停止 */
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

side widgets

<!-- 遅延読み込みのため loading=lazy を付与-->
<!-- ロードバイクグルメマップ -->
<div class="google_iframe">
	<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1gjYbo3VthN8B2wVgfY9aQBNxYXKIXoJO" width="600" height="450" frameborder="0" style="border:0" allowfullscreen loading=lazy></iframe>
</div>

<!-- ガンプラ出荷表 -->
<div class="google_iframe">
	<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=Asia%2FTokyo&src=ajNqNmlxZjlicW1vbGN0NWt2bTU2bjB2cThAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%23B39DDB&showNav=0&showDate=0&showPrint=0&showTabs=1&showCalendars=0&showTz=0&mode=AGENDA" width="600" height="450" frameborder="0" style="border:0" allowfullscreen loading=lazy></iframe>
</div>

ガンプラ出荷表についての詳細は以下を考ください。

Plugin

 ここで挙げているプラグインが全てで、ここに載っていないプリインストールされていたプラグインは削除済みです。

Jetpack by WordPress.com

 プリインストールされていたプラグイン。サイトの統計情報や簡単な死活監視、不正なログインのブロックなど機能は多彩で何かと便利で重宝しているプラグインです。

All-in-One WP Migration

 各種ソフトウェアのバージョンアップのためにサイトを移行させる際に利用しました。普段は利用していません。日常のバックアップとして使う用途もありますが、当サイトは Lightsail の日次のインスタンスのスナップショットでバックアップしています。

SSL Insecure Content Fixer

 ユーザーは HTTPS でリクエストしてきますが、wordpress は CloudFront から HTTP でリクエストを受けるため、HTTP コンテンツを返してしまう動作を回避するために導入しています。当サイトの構成では必須プラグインになっています。

Site Kit by Google

 Google Analytics, Google AdSense, Google Search Console, PageSpeed Insight と言ったサイト運営には欠かせないツールからの情報が一つのダッシュボードに集約される、非常に便利なプラグインです。

Bogo

 多言語対応のプラグイン。元となるページに紐付けられたページが選択された言語のページとして作成されるというもの。単に(例えば)英語で翻訳されたページが複製されるわけではありません。訪問者が言語を英語と選べば英語用のページのみが表示されるようになります。ただし英語用のページが作成されるのみで翻訳は自力で行う必要があります。多言語に対応すればそれだけ訪問者の幅が広がり PV 数を増やすことができます。

Flying Scripts by WP Speed Matters Settings

 PageSpeed Insights で指摘された、「使用していない JavaSrcipt の削除」 のために導入しています。使用されていないのであれば指摘された JavaScript を削除すれば済むかもしれませんが、wordpress や plugin に埋め込まれたそれを削除するのはなかなか難しいです。そこでこのプラグインを使って遅延読み込みしています。現時点で以下の JavaScript を設定しています。

adsbygoogle.js
gtag/js
releases/v5.15.1/css/all.css

Posted by isurut