CocoonからXwriteへ移行。作業とカスタマイズ

2026年5月20日2026年7月1日

5月4日に Cocoon から Xwrite に乗り換えました。
どうにかすべてチェックも終わり一息ついているところです。
気づいた点と変更したことをメモしておきます。

Xwrite を使ってみて驚いたところは、画像を各サイズ自動生成しないことでした。Xwrite はなんにも作りません。
画像フォルダーがスッキリです。

目次 [ close ]

不要画像ファイルの削除

しかし、Cocoon で利用していたファイルの整理をしなければスッキリしないですね。

プラグインの「Regenerate Thumbnails」で不要ファイル削除。

すでに正しいサイズで存在するサムネイルの再生成をしない (高速)。
サーバー容量の解放のため、現在登録されていないサイズのサムネイルを削除・・・。

これらをチェックし、
「添付ファイルすべてからサムネイルを再生成」をクリック。

これで不要ファイルが削除されます。

Xwrite は自動的に画像を生成しなくても、WordPress が 768,1536,2048 等のサイズを作ってしまいます。

で、対策方法です。
WordPress の「メディア設定」で「サムネイルのサイズ」、「中サイズ」、「大サイズ」をすべてゼロを指定。

それから、
xwrite-child フォルダーにある、子functions.php に次のコードを追加する。

// 自動生成画像すべて中止
function remove_add_image_size($sizes){
unset($sizes['thumbnail']);
unset($sizes['medium']);
unset($sizes['large']);
unset($sizes['medium_large']);
unset($sizes['1536x1536']);
unset($sizes['2048x2048']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced','remove_add_image_size');
add_filter('big_image_size_threshold','__return_false');

カスタムHTMLブロックの代わり

投稿・固定ページより広告を貼るには、「カスタムHTMLブロック」を使うようなんですが、何故か「カスタムHTMLブロック」が選択出来ない。ウィジェットでは選択出来るが。

仕方がないので「クラシックブロック」を「HTML として編集」で代替。

表示の方法がわかりました

「投稿画面」 → 右上の「」 → 「設定」 → 「ブロック」 → 「カスタムHTML」チェックを入れる → 閉じる「X」

更新日について

投稿を更新すると、「更新日固定」になっていても更新した当日の日付になってしまう。
現在対応中とのことです。

更新日が「Invalid date」になっていて、クリックするとエラーになってしまう。
一旦「保存」をし、更新日を修正して「保存」をする。

また、更新日を固定するには、カレンダーの日付を選択し保存しなければいけない。

サイトマップ作成

Xwrite は Cocoon の様にサイトマップを作る機能がないので、ここはプラグイン「export-all-urls」を利用して、データベースを CSV に書き出しエクセルでリストを作りました。

書き出した CSV の項目 Title(B列)　URL(C列)をリンク形式に加工します。
エクセルの文字列連結を利用。

=CONCAT("<a href=","""",C2,"""",">",B2,"</a>")

シンタックスハイライト

Xwrite は、ソースコードをシンタックスハイライトする機能が無いので、プラグイン「Highlighting Code Block」を利用する。

また、言語を増やしたりするには PRISM へ行って必要な prism.js をダウンロードする。

フッターメニューにアイコン

今回は、フッターメニューの項目を変えてみました。
少なくなったので、アイコンを付けてみました。

アイコンを表示させるには、
<i class=”fa fa-〇〇”></i>
で表示できます。

それぞれ「ナビゲーションラベル」を

<i class="fa fa-home"></i>ホーム
<i class="fa fa-lock"></i>プライバシーポリシー
<i class="fa fa-sitemap"></i>サイトマップ
<i class="fa fa-envelope"></i>お問い合わせ

としました。

記事下にアドセンス広告をダブルレクタングル

以前は、レスポンシブル広告を1つだけ貼っていましたが、今回から横並びに２つ貼ることに。
で、固定の大きさのほうがいいだろうと思い、336×280 の大きさの広告を作りました。

「スマホ用広告」ブロックが無いので、スマホの時は右側の広告を非表示にすることに。

やったことは、まず「記事下のウィジェット」に「カスタムHTML」ブロックを挿入し、以下のコードを貼り付けます。

実際は、1行目に
<div>スポンサーリンク</div>
を入れています。

<div class="ads-double">
	<div class="ads-double-left">
	この文章を削除しアドセンスコードを貼り付け
	</div>
	<div class="ads-double-right">
	この文章を削除しアドセンスコードを貼り付け
	</div>
</div>

次に、次のスタイルコードを子style.css へ追記します。

/* ダブルレクタングル */
.ads-double {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 0 0 20px 0;
	width: 100%;
}
.ads-double-left, .ads-double-right {
	width: 336px;
	height: 280px;
}
@media screen and (max-width: 767px) {
	.ads-double {
		flex-direction: column;
		align-items: center;
	}
	.ads-double-right {
		display: none !important;
	}
}

上下の位置を調整するには、15 行目を変更します。
現在　margin: 上 0　右 0　下 20px　左 0　となっています。

キャッチフレーズエリアにメニュー

画面最上段のキャッチフレーズエリアに「サイトマップ」と「お問い合わせ」のメニューを設置しました。

<div>でやってみたんですが旨いこと行かないので<table>でやりました。

header.php をxwrite-child フォルダーにコピーし
79行目の

<div class="siteInfo__desc"><?php echo bloginfo( 'description' ); ?></div>

を削除し、次のコードに書き換え。

<div class="siteInfo__desc">
	<table width="100%">
		<tr>
			<td><?php echo bloginfo( 'description' ); ?></td>
			<td align="right"><div class="skp-catchphrase"><a href="URL"><i class="fa fa-sitemap"></i> サイトマップ</a>　|　 <a href="URL"><i class="fa fa-envelope"></i> お問い合わせ</a></div></td>
		</tr>
	</table>
</div>

URL は適時書き換える。

また、次のスタイルコードを子style.cssへ追記。

/* キャッチフレーズエリア */
.siteInfo__desc .skp-catchphrase a {
	color: #fff;
}
.siteInfo__desc .skp-catchphrase a:hover {
	color: #ff3399;
}

文字色も、適時書き換える。

トップへ戻るボタンの位置変更

トップページへ戻るボタンが、サイト内検索ブロックと重なってしまったので位置を変更。

規定より上に 80px (20px → 100px) 移動。

移動させるため、次のコードを子 style.css へ追記した。

/* トップへ戻るボタン */
@media screen and (min-width: 992px) {
    .pagetop {
        right: 20px;
        bottom: 100px;
    }
}

コメント欄の URL 入力欄の非表示と文字数制限

URL 入力欄の非表示

コメント欄の「URL 入力欄」を非表示にしました。

次のコードを子functions.php へ追記。

function remove_comment_url_field($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields', 'remove_comment_url_field');

各入力文字数の制限

「お問い合わせ」には文字数制限をしていたのですが、「コメント」にはやっていなかったのでこの機会に設定することにしました。

名前　　30文字
メール　50文字
内容　　500文字

次のコードを子functions.php へ追記。

/* コメント文字数制限 */
add_filter('preprocess_comment', function($comment){
    if (mb_strlen($comment['comment_author']) > 30) {
        wp_die('<p><span style="font-weight:bold;">ERROR</span>: 名前は30文字以内でお願いします</p><p><a href="javascript:history.back()">« 戻る</a></p>');
    }
    if (strlen($comment['comment_author_email']) > 50) {
        wp_die('<p><span style="font-weight:bold;">ERROR</span>: メールは50文字以内でお願いします</p><p><a href="javascript:history.back()">« 戻る</a></p>');
    }
    if (mb_strlen($comment['comment_content']) > 500) {
        wp_die('<p><span style="font-weight:bold;">ERROR</span>: コメントは500文字以内でお願いします</p><p><a href="javascript:history.back()">« 戻る</a></p>');
    }
    return $comment;
});

尚、日本語のみ受け付けるようにするには、次のメモを参照してください。

リンクのホバー色設定

リンクホバー時の色設定が無いので以下の部分をピンクに変わるよう設定。
ただ、目次の開閉はこの設定では[ close ][ Open ]の文字そのものに触れないと変わらないです。

設定箇所

上部パンくずリスト
記事内（目次含む）
フッターメニュー
目次開閉

次のスタイルを子style.css へ追記。

/* リンクホバー色設定 */
.articleHeader a:hover,			/* 上部パンくずリスト */
.articleBody a:hover,			/* 記事内 */
.siteNavList--footer a:hover,	/* フッターメニュー */
.toc_toggle_button:hover {		/* 目次開閉 */
	color: #ff3399;
}

ドロップダウンメニューのカスタマイズ

グローバルメニューのドロップダウンメニューをカスタマイズしました。

ドロップダウンメニュー（サブメニュー）の上にラインがありますが、当サイトは変更せずそのままにしてあります。

変更するなら
xwrite\assets\css\site.css ファイルの 2814行目に定義してありますので、これを変更したのを子style.cssへ追記します。

カスタマイズしたコードは、次の通りです。子style.cssへ追記します。

/* ドロップダウンメニュー背景色 */
.header .sub-menu,
.header-fix .sub-menu {
	background-color: #eee;
}
/* ホバー時の背景色と文字色 */
.header .sub-menu a:hover,
.header-fix .sub-menu a:hover {
	background-color: #8cd790;
	color: #fff;
}

H2 見出し文字サイズ縮小

基本フォントサイズを、パソコン 18px モバイル 16px にしています。
投稿の見出し文字がちょっと大きく表示されるので縮小しました。

パソコンを 2.0rem(20px) モバイルを 1.8rem(18px)にです。

次のコードを子style.cssへ追記。

/* 投稿見出し H2 */
.articleBody h2 {
	font-size: 2.0rem;
}
@media screen and (max-width: 767px) {
	.articleBody h2 {
		font-size: 1.8rem;
	}
}

まとめ

Xwrite は小難しい「CSS や JavaScript の縮小化」、「画像の Lazy Load」等の高速化設定もないので気楽に開始できました。

速度に関しては、まぁ満足いっている速度が出ています。

Xwriteマニュアルサイト

Xwriteフォーラム

Xwrite(エックスライト) ユーザー専用サイト

Windows11 デスクトップの壁紙を毎日変えたい