お問い合わせはコチラから

【コピペ可能】WordPressテーマ変更手順完全版【LuxeritasからCocoonへ】

サイト運営

このサイトは無料のWordpressテーマの中では最速レベルのLuxeritasを使用させていただいていました。このような素晴らしいテーマを無料で公開されている作者さんには感謝しかありません。

この度、LuxeritasからCocoonにWordpressテーマを変更しました。

この記事ではLuxeritasからCocoonに移行する場合の手順的なものをまとめておきたいと思います。

LuxeritasからCocoonに移行するときにトラブったところ

WordPressテーマの扱いにはだいぶ慣れてきているので移行するときにそれほどトラブルが起きることを想定していませんでしたが、それなりにトラブルはありました。

  • ブログカードのショートコードが違う
  • ソースコードハイライトのショートコードが違う
  • Adsenseのウィジットの仕様が違う
  • Amazon JSプラグインがCocoonと相性悪かった
  • ヘッダーのデザインの自由度が低い

CocoonとLuxeritasのブログカードはショートコードが違う

ブログカードのショートコードがCocoonとLuxeritasで違うことは知っていました。ググれば簡単に見つかるだろうと思っていましたが、それらしい情報は見当たらず。

Luxeritasのブログカードの書式

aタグにdata-blogcard=”1″が含まれているとブログカードと認識するようです。

Cocoonのブログカードの書式

いたってシンプル、URLだけが書かれた行をブログカードと認識するようです。

aタグはあってもよいが、無くてもよい。

LuxeritasからCocoonのブログカードへ置換する

Search Regexを使います。外部リンクと内部リンクでdata-blogcard前の文字列の有無が違うようなので、外部と内部リンクを別々に置換します。

Search Regexで正規表現を使う場合は、PHPコードで書くようなデリミタが必須になります。スラッシュに限らないので、少なくともバックスラッシュだらけのURLの検索パターンとかはちったぁマシになります。スラッシュ以外のデリミタでは、カッコ({})のように対になったものや、パイプ(|)がありますが、いずれにしても検索パターンの中で機能させる記号と被らないようにしないといけません。

参照元https://blog.emwai.jp/wordpress/searchregex/

外部リンク

検索対象:

|<a href="(https?://[\w/:%#\$&\?\(\)~\.=\+\-;]+)" (.*) data-blogcard="1">(.*)</a>|

置換後:

$1
内部リンク

検索対象:

|<a href="(https?://[\w/:%#\$&\?\(\)~\.=\+\-;]+)" data-blogcard="1">(.*)</a>|

置換後:

$1

念のため、検索置換が終わったら、data-blogcard=”1″を検索して、すべて置換されているか確認したほうがよいです。もし置換されず残っているURLがあったら、URLを検出する正規表現に抜けがあるのでそれを修正するか、正規表現を修正するのが面倒で、かつ、数が少ないのであれば直接修正した方が早いかもしれません。

ソースコードハイライトのショートコードが違う

使っていない人は全く使わない機能ですが、ソースコードのハイライト機能というのがあります。

LuxeritasはPrism.jsを使ってそれが実装されていますが、CocoonはHighlight.jsを使っています。

そもそも使っているスクリプトも違いますが、適用するときのインターフェースも両者で違っています。

Luxeritasはショートコードで適用しているのですが、Cocoonの場合はpreタグに対して適用しています。

この部分は、Luxeritasの方が洗練されています。

  • 他のテーマに移行しても、ショートコードを移植すればよい。
  • ショートコード内でHTMLをエスケープしているので手間がかからない。
  • Prism.jsの方がHighlight.jsよりも多機能

Prism.jsをCocoonに組み込む

Prism.jsとPrism.cssを本家のサイトからダウンロードします。

ダウンロードの仕方などは以下のサイトに詳しいです。

Cocoon Child: head-insert.php (tmp-user/head-insert.php)に以下のコードを追加します。

Prism.jsとPrism.cssを子テーマの直下に置いた場合の例です。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/prism.css">
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/prism.js'></script>

LuxeritasのショートコードをCocoonに移植する

Luxeritasのショートコードは子テーマのshortcodeディレクトリに.incという拡張子のファイルで格納されています。そのファイルをCocoonの子テーマにコピーしてfunction.phpから呼び出すなり、function.phpに直接貼り付けるなどしてショートコードを有効化します。

function.phpから呼び出す例
include('shortcodes/highlight_markup.inc');

この時点でLuxeritasで作成した記事に含まれるショートコードがCocoonでもLuxeritasと同じように表示されるようになります。

function.phpに直接貼り付ける例

shortcodes/highlight_markup.incの中身をそのまま貼り付けます。

<?php
add_filter('the_content',function($c){preg_match_all('/\[highlight_markup\].+?\[\/highlight_markup\]/ism',$c,$m);if(isset($m[0])){foreach((array)$m[0] as $v){$s=htmlspecialchars($v,ENT_QUOTES|ENT_HTML5,'UTF-8',false);$c=str_replace($v,$s,$c);}}return $c;},9);add_shortcode('highlight_markup',function($args,$contents){
$contents = str_replace( array( '<br />', '<br/>', '<br>' ), '', $contents );
$contents = str_replace( '<p>', "\n", $contents );
$contents = str_replace( '</p>', '', $contents );
$contents = '<pre class="line-numbers language-markup"><code class="language-markup">' . trim( $contents ) . '</code></pre>';
return $contents;
});

Cocoonの圧縮を無効化

なぜかCocoonでJSとCSSを圧縮してしまうと、たまに?うまく表示されないので、Cocoonの「高速化」設定から、Prism.jsとPrism.cssを除外指定します。

AddQuicktagsに囲みショートコードを登録

次に、Luxritasで使っていた囲みショートコードをCocoonでも使えるようにAddQuicktagに同じショートコードを登録します。

同じようにLuxeritasからCocoonにWordpressテーマを変えた人がいまして、私はまだGutenbergを使っていないのでここまでやっていませんが、GutenbergでPrism.jsを使うという素晴らしい記事がありました。

Adsense広告ウィジットがLuxeritasとCocoonではだいぶ違っている

Google Adsenseの設定方法がCocoonとLuxeritasだと違うので、最初は戸惑います。

Luxeritasは自動レスポンシブ広告のコードをアドセンスウィジットに張り付けるのが基本的な使い方で、それで対応できない広告の場合には必要なコードを張り付けるという感じです。

それに対してCocoonでは広告ウィジット内にいちいちAdsenseのコードを張り付ける必要がありません。テーマに一度Adsenseのコードを設定したらウィジット側では表示したい広告を選ぶだけです。

簡単に言うとCocoonの方がLuxeritasよりもAdsense関連のインターフェースは洗練されています。

CocoonはAmazon JSと相性が良くなかった

LuxeitasではAmazon商品リンクのためにAmazon JSというプラグインを使っていました。Amazon JSはAmazon商品をWordpress上から検索できるのが大変便利です。プラグインの更新頻度が低く、amp対応もありません。amp対応のことを考えると遅かれ早かれAmazon JSを卒業するか改造する必要がありました。

念のために言っておくと別にLuxeritasとAmazon JSプラグインに何の関係もありません。

いままでLuxeritasとAmazon JSプラグインの組み合わせで問題が起きたことはありませんが、Cocoonに切り替えた時にAmazon JSとの組み合わせで問題が起きました。

起きた問題

Cocoonでは、Amazon JSを使い、かつ、画像の遅延読み込み(Lazyload)を有効にするとAmazonの商品画像が表示されません。画像の遅延読み込みをやめれば問題なくAmazon JSと組み合わせることができるので、遅延読み込み対象から外せばよさそうですが、その設定をするのも大変です。

そもそもCocoonにはAmazon商品リンクを作成する機能がテーマに含まれているので通常のCocoonユーザーからすれば、Amazon JSを画像の遅延読み込みを除外してまで無理に使う理由がありません。

ということでAmazon JSは使わずにCocoonのAmazon商品リンクの機能を使うように過去記事を修正する必要があります。

Amazon JSからCocoonのAmazon商品紹介機能に移行

過去記事のAmazon JSのショートコードをCocoonのAmazon商品リンクのショートコードに置き換えれば、テーマを変更してAmazon JSを使わずともAmazon商品リンクはそのまま有効になります。

Search Regexを使います。

検索対象:

[amazon_js

置換後:

[amazon

CocoonのAmazon商品紹介のショートコードには、kw=”キーワード”という項目があります。この項目は同じものがAmazon JSにはありません。

Amazon JSのtitle=”商品名”という部分をkw=”商品名”と置き換えます。

検索対象:

title="

置換後:

kw="

ヘッダーのデザインの自由度が低い

Luxeritasはヘッダーデザインの自由度がかなり高いです。直接いじればどうとでもなりますが、カスタマイザーや設定から変更できるかどうかで見るとLuxeritasの方が多彩な表現が可能です。

Cocoonは必要最低限という感じです。

サイトタイトルの文字列とロゴはどちらかしか表示できず、同時に表示できません。ロゴを表示するならばロゴの中にサイトタイトルを含めるようなロゴにする必要があります。

この辺はどこまで頑張るか?という話になるかと思います。

まとめ

慎重かつ大胆にLuxeritasからCocoonにテーマを変更しました。いくつかハマったところがありましたが、どうにか移行できたのではないかと思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました