h2vR.js - WordPressへの設置 - チュートリアル

WordPressへの設置

※ 【2020.04.04】WordPress 5.7 での表示不具合とその改善方法について、こちらの記事 →【続：縦書き h2vR.js】WordPress 5.x での表示不具合を解消する。をお読みください。

WordPress でとりあえず投稿記事本文を縦書きにしたい場合は、

h2vR.js と h2vR.css をウェブサーバにアップロード。
使用するテンプレートの header.php を編集して、<head>〜</head>に、h2vR.js と h2vR.css を読み込む設定を追加（→参照）。
普通に記事を書く。
記事全体（または記事内の縦書きにしたい部分）を <div class="h2vr_nn">〜</div> で囲んで縦書き領域に指定する（→参照）。

という作業を行えば大丈夫なのですが、2. の「テンプレートに直接手を加える」という作業は面倒ですし、あまりエレガントな方法ではありません。

そこで、テンプレートに手を加えることなく、上記 2. の作業を代行してくれるWordPressプラグインを作ってみました。

WordPressへのインストール方法は以下のとおりです。非公式プラグインなので、インストールは手作業で行う必要があります。

これでインストールは完了です。

次に、このプラグインを有効化するために、WordPressのダッシュボードにログイン。プラグインメニューに移動すると、"h2vR support" というプラグインがリスト内に見つかるはずです。

…といっても、特別なことは全くありません。ビジュアルエディタでもテキストエディタでも、まずはいつも通りに記事を書いてください。

書き終えたらテキストモードに切り替えて、縦書きレイアウトで表示したい部分を縦書き領域に指定します。

今回の例では記事本文全体を縦書きにしたいので、この画像のように文書全体を縦書き領域に指定してみます。画像のオレンジの下線部分です。

縦書き領域を指定したら、「プレビュー」ボタンをクリックして表示を確認してみます。

縦書きで表示されました！

こちらをクリック → h2vR-support.zip

ダウンロードしたら、上記の説明に従って、WordPressにインストールしてください。

このプラグインパッケージには、h2vR.js と h2vR.css が含まれています。これらを別途入手・ウェブサーバに設置する必要はありません。
将来 h2vR.js がアップデートされた場合は、このプラグインフォルダ内（wp-content/plugins/h2vR-support/）の h2vR.js と h2vR.css を最新のものと入れ替えてください。プラグインに現在含まれている h2vR.js のバージョンは 4.2.5 です。

…これは、テンプレートの大幅なカスタマイズが必要です。

WordPressテンプレートのカスタマイズ / 作成方法については、ネットに有用な情報がたくさんあります。それらを参考に、是非トライしてみてください。