Wordpredssプラグインのh2vrとさくらサーバーのSSLが噛み合わない

Updated on

WordPressで縦書き文章が読めるh2vr.js（プラグイン名はh2vr support）という優れたプログラムが配布されているのですが、さくらサーバー側の不具合（？　仕様？）なのかSSL化すると縦書きスタイルが崩れてしまうようです。私が現在使っているのは共有サーバーの無料SSLです。

ちょっと前に対応がわかったので、メモがてら残しておきたいのですが

どうもさくらレンタルサーバーでSSL化するとURLが、httpsではなくhttpで表示されるためらしい

さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点

https://qiita.com/tabimoba/items/64ef60412abe7ad6f0ac

まあ私が読んでも半分もわからなかったんですけど、とにかくさくらでSSL化すると、サーバー側の仕様か正確なURLを返してくれないことでCSSとjsが読まれず、縦書きも機能されないということのようです。

で、私がやったのは、phpの記述を勉強していないため押し切るような発想しかできないのですが、じゃあCSSとjsのリンクを直接書けばいいやんってなりまして、下のようにプラグイン編集しました。

WordPressの管理画面からプラグイン>プラグイン編集＞h2vR-support.phpを指定

phpファイルを編集するだけです。

function add_h2vr_to_wp_head (){
	$url = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
☆  echo '<link rel="stylesheet" href="'. $url . 'h2vR.css">'."\n";
☆　echo '<script src="'. $url . 'h2vR.js"></script>'."\n";
☆  echo '<script src="'. $url . 'h2vR_extensions.js"></script>'."\n";
}
add_action ('wp_head','add_h2vr_to_wp_head',10);

もともとの記述が↑です。

多分13行目と14行目と15行目にあるであろう部分（☆）でh2vrのCSSとjsのリンクをあてているので、

function add_h2vr_to_wp_head (){
	$url = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
★  echo '<link rel="stylesheet" href="//hollowbooks.thyme.jp/wp-content/plugins/h2vR-support/h2vR.css">'."\n";
★  echo '<script src="//hollowbooks.thyme.jp/wp-content/plugins/h2vR-support/h2vR.js"></script>'."\n";
★  echo '<script src="//hollowbooks.thyme.jp/wp-content/plugins/h2vR-support/h2vR_extensions.js"></script>'."\n";
}
add_action ('wp_head','add_h2vr_to_wp_head',10);

こんな感じで書きました。★三ヶ所変更です。echoは「表示せよ」みたいな命令だったと思うのでそこは置いておいて、その中身の

href=”‘. $url . ‘h2vR.css”

script src=”‘. $url . ‘h2vR.js”

script src=”‘. $url . ‘h2vR_extensions.js”

の三つを、 h2vrのCSSとjsファイルのURLに変更します。URLは私のサイトのを参考に。リンク冒頭を「//～」で開始したのは、この記述だとhttpsでもhttpでも両方返せると聞いたのでそうしました。私はこれで大丈夫だったんですが、もし 駄目ならSSL化後のhttps://～から書いてみるといいかも

プラグインを編集する前は、一応WordPressのバックアップを取っておいた方が安全です。

◇

余談。h2vrの表示で、段組の破線の上下スペースを広げたい時、自分でも過去に何か試行錯誤したはずだけど（編集バーのカスタマイズとかで）いろいろやったものの結局うまくいかなかったので直接CSSを編集しました。

h2vr.cssファイルの233行目

._r_separator{
	clear:both;
	width:100%;
★	height:25px;
★	margin-bottom:25px;
	border-bottom: dotted 1px #ccc;
}

この_r_separatorというクラス名の部分が段組みに影響するようです。で、★のheightとmargin-bottomの値を変更すると段組が広がり/狭くなります。私は25pxくらいにしました。

◇

とりあえずSSL化+プラグインが動作してよかったよかった、という話。

Back to Top