CocoonからXwriteへ移行した実際の作業とカスタマイズ記録

2026年5月20日2026年8月17日

「そろそろテーマを変えてみようかな…」
そんな軽い気持ちから、Cocoon から Xwrite へ引っ越してみました！

5月4日に乗り換えたのですが、どうにかすべてチェックも終わり一息ついているところです。

気づいた点や対応手順、また、Xwrite のカスタマイズしたことを順次メモしておきたいと思っています。

目次 [ close ]

Xwriteにして気づいたところ

不要画像ファイルの削除

Xwrite を使ってみて一番驚いたことは、画像を各サイズ自動生成しないことでした。Xwrite はなんにも作りません。

画像フォルダーがスッキリです。

しかし、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 と prism.css をダウンロードする。そして、xwrite-child フォルダーに設置し、「高度な設定」で設置ホルダー名を設定する。

404 Not Foundページ

Cocoon には簡単に自分好みの画像やデザインに変更できる機能がありますが、Xwrite にはありません。

別に初期のままでもいいのですが、フォントが大きいのでフッターメニューが1画面に表示されないのが気になりました。

フォントサイズを変更するのも面倒なので、Cocoon の時使っていた画像だけを使うことにして、フッターメニューが表示されるよう変更してみることにしました。

画像は 300 x 245 の大きさです。

変更手順

Xwrite は、直接 404.php を変更します。

1xwrite フォルダーにある 404.php ファイルを xwrite-child フォルダーにコピーします。

2コピーした 404.php の13行目から21行目迄を削除でもいいのですが、コメントアウトにしました。

3で、次の3行のコードを13行目に挿入。

		<div style="margin-top: 10px; text-align: center;">
			<img src="URL" alt="not found" width="300" height="245">
		</div>

phpMyAdmin で「ログインID」の漏洩を防ぐ

Xwriteで投稿すると投稿者が記載され、それをクリックすると「投稿者記事一覧」のアーカイブが表示されます。

ただ、この時に URL/author/ログインID/ が表示されて「ログインID」が丸見えになってしまってます。

この対策では、Edit Author Slug が有名ですが、今回は、プラグインを使わずにphpMyAdmin（データベース）から直接 user_nicename（URLに表示されるスラッグ）を変更しました。

変更する値は半角英数字およびハイフン（-）を使用します（日本語を使うとURLエンコードされて長い文字列になってしまいます）。

phpMyAdminで user_nicename を変更する手順

STEP1

phpMyAdminにログインする

STEP2

左側のメニューから、該当するWordPressのデータベース名をクリックします。

wp_users テーブルを開く

STEP3

対象ユーザーの編集画面を開く

登録されているユーザー一覧が表示されます。
変更したいユーザーの行にある「編集」（または鉛筆マーク）をクリックします。

STEP4

user_nicename を書き換える

項目のリストの中から user_nicename を探します。

user_login ＝ログイン時に使うID（変更しないでください）

user_nicename ＝ URL（投稿者ページ等）で使用される表示名（ここを変更します）

user_nicename の「値」の欄を、URLに表示させたい任意の英文字列（例: profile-tarou など）に書き換えます。

STEP5

変更を保存する

ページ最下部にある実行ボタン（「実行」または「Go」）をクリックして保存します。

「1 行挿入されました」または「1 行更新されました」と表示されれば作業完了です。

Xwriteをカスタマイズ

基本設定：ソリッドスキン

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

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

アイコンを表示させるには、
<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;
	}
}

上下の位置を調整するには、6 行目を変更します。
現在　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="site-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 .site-catchphrase a {
	color: #fff;
}
.siteInfo__desc .site-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)にです。

Xwrite は、
html { font-size: 62.5%; }
が設定してあるので、rem 指定がしやすいです。

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

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

リスト表示と前後記事ページャーに枠線

最近は強い枠線で囲う枠線デザインが減りましたが、好みなので敢えて枠線を付けました。

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

/* リスト表示と前後記事ページャーに枠線 */
.articleList.type-list .xw-article-media,
.articlePager.prev,
.articlePager.next {
	border: 1px solid #8cd790;
}

記事日付欄に枠線

これも見なくなりましたね。
紹介するまでもないけど、一応記録ってことで。

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

/* 記事日付欄に枠線 */
.articleHeader__info {
	border-top: dotted 1px #757575;
	border-bottom: dotted 1px #757575;
	padding: 5px 5px;
}

タグホバー時色変更

初期では、ホバーすると背景色がリンク色になり文字色が白色になります。
これを背景色だけを基本色にするよう変更しました。

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

/* タグホバー */
@media (hover: hover) {
	.tagcloud .tag-cloud-link:hover,
	.wp-block-tag-cloud:not(.is-style-outline) .tag-cloud-link:hover {
		background-color: #8cd790;
	}
}