このサイトは無料の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の検索パターンとかはちったぁマシになります。スラッシュ以外のデリミタでは、カッコ({})のように対になったものや、パイプ(|)がありますが、いずれにしても検索パターンの中で機能させる記号と被らないようにしないといけません。
外部リンク
検索対象:
|<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にテーマを変更しました。いくつかハマったところがありましたが、どうにか移行できたのではないかと思います。