TypeSquareというサイトにて、日本語にも対応したWebフォントをレンタルすることができます。レンタル後に指定されたソースコードを記述することで使うことができるのですが、<head>タグ内に記述する形式なのですが、直接テーマファイルを改変したくない場合もあるでしょう。よってfunctions.phpを使って関数からフォント読み込みをしたかったのですが、思うようにいきません。
広告
今回の件は「スタンダードプラン」についてです。「セルフホスティングプラン」の場合は、どのようなコードになっているのか不明です。
本来指定されるコード。
まずは、Webフォントを自サイトで使用するために、TypeSquareから指定されるコードは、以下のような形になっています。
<!-- HTML -->
<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx%3D" charset="utf-8"></script>
<!-- 本来、URL内には固有の番号が入るため、xxx…で伏せさせていただきます。 -->
これを<head>タグ内に追記することとなるのですが、使用中のテーマのheader.phpを直接編集してしまうと、もしテーマのアップデートがあったときに、編集したことが消えてしまいます。
かといって子テーマを作ってそこにheader.phpをコピーすると、アップデートの影響を受けなくなってしまい、header.phpだけが古いという半端な状態になります。
<head>タグを直接編集しない方法および問題点。
だからheader.phpを編集しなくとも、<head>タグ内に追記する方法として、functions.phpで下記を実行する方法があります。
/* php */
function adds_head() {
echo '<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx%3D" charset="utf-8"></script>';
}
add_action('wp_head', 'adds_head');
上記を実行することで、header.php内のwp_head();という関数がある箇所に、echoの内容が差し込まれることになります。
しかしこの方法、header.phpを直接編集するよりもコードが長くなりますし、phpファイルにhtmlコードを記述しているのは、かっこよくありません。
また、echoの内容はBracketsなどのテキストエディタで色分けしてくれないので、コードの読みやすさに欠けてしまいます。
ほんの数行の短文とはいえ、こういうものの積み重ねが、のちのちコードの編集しづらさにも影響してくるのです。
WordPressが用意してくれた関数を使う。
WordPressには、<head>タグ内でJavascriptファイルを読み込むための関数が用意されています。その専用の関数を使うことで、読みやすさにも編集しやすさにも長けたコードになるでしょう。
先程のコードに代わって、以下のコードをfunctions.phpに追記します。
/* php */
wp_enqueue_script( 'typesquare', '//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx%3D' );
そして実際にブラウザを起動し、ページのソース表示を実行してみます。実行結果が、始めに書いたようなhtmlコードになってくれるのが正解ですが、実際の結果は…。
<!-- html -->
<script type='text/javascript' src='//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx=&ver=4.8.1'></script>
なぜかこのように、jsファイルのURLのうち、最後にある「%3D」の部分がなぜか「=&ver=4.8.1」に置き換わってしまいました。
WordPressが付くこと自体はどのjsファイルのURLでもそうなので、番号が付いてても本来は読み込みに影響はないのですが、「%3D」が違うものになっているために、読み込みに失敗してしまいます。
「%3D」はイコールを表しているのですが、本来はURLエンコードされずにそのまま出てくれないと読み込みできないのに、勝手にエンコードされてイコールになっているうえに、URLパラメータを複数つなげる際、2つ目以降はアンドを使うのに、それも勝手に「#038;」に変換されています。
バージョン番号の付加が原因？
本来はあってもなくても読み込みに影響しないはずのバージョンですが、もしや今回これが影響を与えている？
WordPressのJSとCSSからverを取り除く | loconoco
そう思って上記サイトから、バージョン番号を勝手に付加させないための関数を追加してみました。下記にコードを引用します。
/* php */
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' . get_bloginfo( 'version' ) ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
そして再度ブラウザでの実行した結果がこちら。
<!-- html -->
<script type='text/javascript' src='//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx'></script>
バージョン番号は消えてくれたのですが、なぜか一緒に、末尾にあった「%3D」まで消えてしまいました。
これでは正しいURLとして認めてくれません。やはり読み込みに失敗してしまい、Webフォントは適用されません。
解決方法。
1人だけで考えていても答えが見つからないので、質問サイトに頼ってみます。そして得られた回答がこちら。
/* php */
wp_enqueue_script( 'typesquare', '//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxxx%3D', array(), null );
wp_enqueue_script();でjsを読み込むこと自体は同じなものの、2つしか指定していなかった引数を、4番目まで指定した形になっています。
そして実行結果は下記のとおり。
<!-- html -->
<script type='text/javascript' src='//typesquare.com/accessor/script/typesquare.js?SjNx2dXya9s%3D'></script>
URLが正しい形になっており、これでようやくWebフォントを読み込むことができました。
なお、charset属性がなくなってはいるのですが、今の時代は文字コードにほぼすべてUTF-8が使われているので、わざわざ指定することもないでしょう。
ちなみに、3番目と4番目の引数がどういう意味なのか調べてみると、まず3番目の引数はこの関数よりも前に読み込みたいjsを指定するのだそう。
ただ、それはwp_enqueue_script();で登録されていないものに限るそうで、今回は特に必要ないので、初期値であるarray()のままです。
続けて4番目の引数は、jsのバージョン番号を付加するかどうか。初期値はfalseであり、この場合は現在のWordpressのバージョンを自動的に付加されます。
そしてこれがnullだった場合は、バージョンを付加しないとのこと。今回の件を解決できたのは、この引数のおかげということになりますね。
しかし、バージョン番号を付加したり、全体的にバージョン付加を停止させた場合に、なぜ直前のURLが書き換わってしまうのか、それは謎のままです。
WordPress : URLの & が #038; に変換されてしまう | Hinemosu
上記サイトのように、記事本文のアンドを勝手に変換するのを止める方法ならあるのですが…。
余談。本サイトのWebフォントの使いみち。
本サイトにて、どこにTypeSquareのWebフォントを使っているかというと、最上部のサイトタイトル部分です。「ワイヤード・パンチ」と書いているところです。ハルクラフトというフォント。
また、プランは今のところ無料のものにしているため、ひと月に10,000PVまでという制限があります。これを超えると、次の月になるまでWebフォントが消えてしまいます。
TypeSquareとGoogleアナリティクスではPVの計測方法が違うので、10,000はあくまでも目安でしかないのですが、もしタイトルが標準フォントに戻っていたら、今月は好調なんだなと思ってください。
この記事を書いている8月16日時点で、消化率80%超えの通知が来たため、この調子なら月末になる前にWebフォントが消えてしまうでしょう。
別にタイトルのフォントが何だからといって、PVにさほど影響するとは思えませんが、サイトを訪れて真っ先に見えるものなので、やはり少しくらいはおしゃれにしておきたいもの。
かといってPVに影響しない画像に置き換えてしまうと、読み込み時間に多少影響は出ますし、拡大したら粗いですし、あとから修正したくなったときに面倒です。
拡大しても劣化しないSVGで作るという手もありますが、画像同様に文字としては認識しませんし、これも作成には手間取ります。
だから、手っ取り早くタイトルを飾りたいなら、Webフォントが一番です。
しかし、今後PVが増えてもWebフォントが消えないようにするには有料プランしかないのですが、最安のプランでも月2,160円ですし、PVの上限は25万。
まだそこまでのPVを稼げていないので、毎月2,160円も払うのは高すぎます。もうちょっとお手頃なプランがあればいいんですけどね。
他のところからPV制限のない無料のWebフォントを探すにしても、日本語対応のものは全然ありません。本サイトは海外を対象してないので、タイトルはやはり日本語を使える方が望ましい。
Webフォント化されていないフォントを勝手に変換してアップロードするのは、そのフォントの規約にひっかかって厄介なことになりそうなので、やめた方が良いでしょう。
