●HPBでは簡単にできるのにできないこと

ここまで読んで、『Word Pressってなかなかいいじゃないか。やってみようかな？』
と思った「ＨＰＢ御用達」の皆様。チョット待ってください。

Word Pressでは今までＨＰＢで当たり前のようにできていたことが、「当たり前には」できません。
『えっ？なんでこんなことができないンだ！』と叫ぶこと度々。
そうならないように、予め説明しておきます。

• 段落内改行と改段落，空白が自由に打てない，表に画像を入れる
• ラベルリンク(解決済み)
• サイドバーの独立，検索・置換，リンクの自動修正

1. 段落内改行と改段落が逆

本来、
・「enter」＝「改段落」 → <p>～</p>。
・「shift＋enter」＝「段落内改行」 → <br>

しかし、ＨＰＢでは、
・「enter」＝未確定状態 → 「確定」、「確定状態」 → 「段落内改行」
※オプション → 編集 → 「改行キーで段落を作成」のチェックを外す。
・「カーソル下げ」＝「改段落」
・「shift＋enter」＝「改段落」

つまり、ＨＰＢでは段落内改行と改段落の操作が本来とは逆になっているのです。

これは、
・文章を書くときに段落内改行を頻繁にしなければならないので、
   キー操作を楽にして、思考や文章の流れが止まらないようにするため。
・確定状態でうっかり確定キー( enter )を打ったときに、改段落にならないようにするため。

ところが、Word Pressでは本来のキー操作。
「段落内改行」のつもりで「enter」を押すと、「改段落」として新しいブロックに移ります。
改行するときは、二本指を使って「shift」と「enter」の二つのキーを押さなければなりません。
この面倒くさいこと！

ネットではいろいろな対策が説明されています。

①functions.phpに追記 → こちら

function custom_enter( $settings ) {
 $settings[ 'forced_root_block' ] = false;
 return $settings;
}
add_filter( 'tiny_mce_before_init', 'custom_enter' );

私の環境では効果なし。

②functions.php に追記 → こちら

/* Filter Tiny MCE Default Settings */
add_filter( 'tiny_mce_before_init', 'my_switch_tinymce_p_br' );
 
/**
 * Switch Default Behaviour in TinyMCE to use "<br>"
 * On Enter instead of "<p>"
 * 
 * @link https://shellcreeper.com/?p=1041
 * @link http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 * @link http://www.tinymce.com/wiki.php/Configuration:forced_root_block
 */
function my_switch_tinymce_p_br( $settings ) {
 $settings['forced_root_block'] = false;
 return $settings;
}

私の環境では効果なし

COCOON さんに頼むしかないようです。

2. 空白が自由に打てない

ＨＰＢではもちろん、メモ帳でもWordでも、空白キーを打てば打った数だけ空白が入ります。
しかし、Word Pressで次のようになります。

・文章途中で空白 → 何個空白をいれても半角空白１個
（編集画面では打った数だけの空白が入るが、プレビューやブラウザでは「半角空白１個」）

・行頭での空白 → 入らない

英語では「一字下げ」という習慣がないから、間違った行頭下げをしないようにしているのでしょう。


（ 対策 ）

・ブロックツールバー → タテ三点（詳細設定） → HTMLとして編集
→ 空白を入れる場所に「&nbsp;」（ＨＰＢの空白コード）を挿入する。
・「&nbsp;」＝「半角空白」、「&nbsp;&nbsp;」＝「全角空白」。
   「&nbsp;」の数だけ空白を入れられます。
・ブロックツールバー → タテ三点（詳細設定） → ビジュアル編集

※「<em> </em> 」を挿入すると説明するサイトもありますが、私の環境ではできませんでした。


空白挿入は「行頭の文字下げ」だけでなく、箇条書きで先頭文字を揃えたり、
文章の流れの速さを変えたりするときによく使います。
そんなときに、いちいちコードエディタに変えて「&nbsp;」を入れていたら、思考が止まってしまいます。
日本語の文章を書くためには、キー操作と文章が「１対１」でなければなりません。
特に「親指シフト」を使っている人はそれを求めるでしょう。
この点、ワードプレスは「日本語の文章を書くためのツール」としてまだまだのようです。

3. 表に画像を入れる

a. どんなときに必要か

作業手順や部品構成を説明するときに画像の横や下に説明文を入れるときがあります。
例えば、

上の二つの表はワードプレスで作ったものではありません。
予めＨＰＢで表を作ってサーバーにアップロードし、
それを後述の「php インクルード」で呼び出したものです。 → こちら

ＨＰＢで「表を作って その中に画像とテキストを入れること」は簡単です。
表は拡縮されることなく「原寸」で表示されます。
筆者の意図通りの「画像と説明文」が表示されます。

なお、「php インクルード」をするには画像に「絶対パス」を使わなければなりません。
ＨＰＢで表に画像を入れると、画像のある場所は「相対パス」で記述されます。
画像のある場所が「相対パス」でも、ワードプレス頁が「下書き」なら画像も呼び出されます。
しかし、頁が「公開」されると画像だけが呼び出されません。

当サイトでは「オートバイ修理や時計調整」も扱っていますので、
どうしても「表の中に画像を入れて説明すること」が必要になります。
ワードプレスではどのようにしたら同じことができるのでしょう。

以下では COCOON を使っている場合の説明です。
COCOON 以外のテーマで同じことができるかとうか分かりません。

b.「メディアと文章」を使う

まず、画像の横に文章を入れる場合。
これには「メディアと文章」というブロックが使えます。
これを使うと次のようになります。
※文字はインクルードしたものと大きさを合わせるために小さくしています。

比較のために、もう一度「 phpインクルードしたもの」を。

● テストファイル３ / 画像 400×300＋440×300

違いは、

●画像の大きさ

画像はどちらも 400×300 、インクルードした方の表は 840×300、メインカラム巾は 900 です。
多分、ワードプレスの方が画像を拡大したのでしょう。
「原寸表示ができない」のは少々「作り手の意図」を害しますが、許容できる範囲です。

●文章の「上揃え」ができない。

ワードプレスでは文章の「垂直方向揃え ( 上揃え，中央揃え，下揃え ) 」ができません。
できるのはの「水平方向揃え」だけです。
文章が少ない場合は「上揃え」でないとバランスが悪くなります。
まあ、現代人にはこの方が見やすいのかも知れません。
許容すべき範囲でしょう。

●文章を入力するときに 文字サイズ ( プリセットサイズ ) が大になる。

ただし、これは「切り換えればよいだけ」のことで問題とはならない。

c.３カラム×３を使う

次は、画像の下に説明文を入れる場合。
これには、「３カラム・33/33/33」が使えます。
「１行目の３カラムに文章、２行目の３カラムに画像、３行目の３カラムに文章」とします。
ただし、1行目については左と中央のセルを結合するために、「70/30」の２カラムにしました。
このようになります。

比較のために、もう一度「 phpインクルード 」のものを。

● テストファイル１ / (280×210)×3＋20(1行目)＋100(2行目 )

違いは

●表の行間が広くて「文章と画像のつながり」が緩くなる。

これは、ブロックを組み合わせて頁を作っているのだから仕方がないのでしょうか？
何か方法がありそうです。

また、「php インクルード」 でも元の表が大きいと縮小されます。
次の表は ( 400×300 )×３ の 巾 1200 のものです。
上の「テストファイル１」と比べると全体が縮小された関係で、行と行の間が広くなっています。
「phpインクルード」を使う場合は「設定したカラム巾に入る表」にしなければならないでしょう。

● テストファイル２ / (400×300)×3＋20(1行目)＋100(2行目 )

なお、ＨＰＢで作った表を、html として貼りつけても php インクルード と同じになります。

d. Table Press は 実用的ではない

あちらこちらで Table Press という「表に画像を入れるプラグイン」が紹介されています。
これは、画像や文章を入れた表を予め作って、それをショートコードで呼び出すもの。
作業としては「phpインクルード」と同じになります。

問題は表を作るときに「画像が表示されない」こと。
画像にどのような説明文を入れるかは、画像を見ながら考えていきます。
説明する画像が見えないのだから、説明のしようがありません。
このプラグインを使うのなら、ＨＰＢで表を作ってphpインクルードする方が楽です。

e. どうするか？

「できるだけ大きな画像を使って分かりやすくする」
これが今までの方針でしたが、
ワードプレスではサイドバーを入れるのでどうしてもメインカラム巾が小さくなります。

サイドバーを取り払って「１カラム」すると、ＨＰＢで作った頁と変わらなくなり
ワードプレスを使っている意味がありません。

取り敢えず、次のようにすることにしました。
・できるだけ「メディアと文章」を縦に並べて手順を説明する。
・どうしても、横並び画像で手順を説明しなければならないときは、「phpインクルード」を使う。

このようにして作った頁が → こちら。

【広告】
電動トライクです。
シニアカーの代わりに。
孫には こちら

• 段落内改行と改段落，空白が自由に打てない，表に画像を入れる
• ラベルリンク(解決済み)
• サイドバーの独立，検索・置換，リンクの自動修正

4.ラベルリンク

2020.08.13.追記
ワードプレスが 5.5 にアップデートされました。
5.5では「高度な設定」で「HTMLアンカー」復活しました。
以下で検証した TinyMCE Advanced，Classic Editor，Gutenberg プラグインは不要となりました。
読む必要はありません。

ただし、「高度な設定 → HTMLアンカー」より
旧エディタの「アンカーボタン」の方がうまくアンカーを付けられます。

a.簡単なＨＰＢでの操作

( ラベル / アンカー を付ける )

・「イロハ」に「abc」というラベル / アンカー をつける。
↓
・文字列「イロハ」をドラッグ → 右クリック → リンクの挿入 → 属性画面
→ ラベルを付ける → ラベル名「abc1 → ＯＫ
※ html 記述 → <a name=”abc” id=”abc”>イロハ</a>


( このラベルにリンクを張る )

・「ニホヘ」から「イロハ」にリンクを張る
↓
・文字列「ニホヘ」をドラッグ → 右クリック → リンクの挿入 → 属性画面
→ ラベルへ → 他のファイル → 参照 → ファイルから → 該当ファイルをクリック
→ そのファイルにある表示される → ラベルを選ぶ → ＯＫ
※ html 記述 → <a href=”頁のURL#abc”> ニホヘ</a>

b. Word Pressでの操作

リンクを張ることは簡単です。
ブロックツールバーのリンクボタンを押して、頁ＵＲＬとラベル#〇〇を記入すればよい。
※注意
改頁をしているときは「頁ＵＲＬ/△/#〇〇」。
△は頁番号。改頁２頁目 → 2，改頁３頁目 → 3 …。

しかし、どうやってラベルを付けるのか？
このラベルはWord Pressではアンカーと呼ぶらしい。
このアンカーを付けるボタンばどこにあるの？

コンテンツブロックを探してもありません。

サイドパネルの「高度な設定 → html アンカー」と説明するサイトがあります。
しかし、それはワードプレスの古いパージョンでしょう。
現在のバージョンでは「高度な設定 → 追加CＳＳクラス」だけしか出てきません。
※多分、そのうちに出てくるようになるでしょう。( 後述 )

c.対策

イ. html で書く

( ラベル を付ける )

・ラベルを付ける → <a id=”ラベル名”>ラベルを付ける文字列</a>
・文字列「イロハ」に「abc」というラベルを付けるのなら、
「イロハ」の前に「<a id=”abc”>」、「イロハ」の後に「</a>」。

・別に、「イロハ」に直接ラベルを付ける必要はありません。「イロハ」の前に付けても同じです。
そこで「イロハ」の前に「<a id=”abc”></a>」を挿入すればよいでしょう。

※ラベル名に「#」不要。
   後述の TinyMCE Advancedのアンカー のように半角英字で始める必要はありません。
※ＨＰＢでは「<a name=”abc” id=”abc”>イロハ</a>」ですが「name=”abc”」を削ってもＯＫです。


( ラベル へ リンク を張る )

・リンク元の文字列をドラッグ → ブロックツールのリンクボタン → 「ラベルのある頁のUＲＬ#abc」 → 送る

こんな面倒くさいことを誰がやるでしょうか？
ＨＰＢ御用達なら『Word Pressなんか ヤ・メ・タ！』

まあ、まあ、他に方法がありますから。

ロ.Gotenbergを使う

Word Pressにはもともと Gotenberg ( ブロックエディタ ) が入っています。
だから、わざわざ Gotenberg をプラグインする必要はありません。

しかし、この Gotenberg の「高度な設定」には「追加ＣＳＳ」の他に「htmlアンカー」があります。
数日前には英語版で、「advanced  → htmlanchor」だけ。
しかし、日本語版になって「実験中」との表示。
さらに、アップデートして「実験中」の表示が消える ( バージョン 8.7.0 )。
この Gotenberg がWord Pressのバージョンアップに使われるのではないでしょうか？
※Word Press の アンカーについての説明 → こちら

・Gotenberg → 有効化
↓
・ラベルを付ける場所をドラッグ
↓
・右パネル → 高度な設定 → htmlアンカー → ラベル名「abc」※半角英数字で始める
↓
・Gotenberg から元のプロックエディタに戻るには「Gotenbergプラグインを無効化」

このラベルへのリンクはブロックツールバーのリンクボタンで → 「頁URＬ#abc」。

ハ.TinyMCE Advanced を使う

このプラグインを使うと旧エディタが使えるようになります。

旧エディタではツールバーにアンカーボタンがありました。これが使えるのです。

・TinyMCE Advanced インストール → 有効 → 設定 
↓
・「ブロックエディタをクラッシックエディタに置き換える」にレ → 常にクラッシックエディタ画面になる。
↓
・ラベルを付ける文字列をドラッグ → アンカーボタン → アンカー名は半角英字から始める。
↓
・このラベル(アンカー)にリンクを張る → ブロックツールバーのリンクボタン
→ 「頁UＲＬ#ラベル名」 → 送る

要するに現在のバージョンではアンカーボタンがないので、
アンカーボタンのある古いバージョンを使うということです。
ちょっと抵抗を感じます。


( Classic Editor も使う )

ラベルを付けるときは古いパージョン、ラベルを付けたら新しいバージョンに切り換える。
これが、面倒な場合は Classic Editor プラグインをインストール。
設定で「旧エディタを使うかプロックエディタを使うか選択する」を選ぶ。

ニ.どうするか？

私は「TinyMCE Advanced＋Classic Editor」で対処していますが、「Gutenberg」もよいでしょう。
早晩、この Gutenberg がWord Pressに搭載されるのは確実でしょう。

もちろん、「ＨＰＢに戻る」という方法もあります。
しかし、それはもう少しWord Pressで苦労してからでもよいでしょう。

調整し慣れたキャブレターに戻るよりインジェクションに馴れましょう。
もっとも、インジェクションは素人に設定はできませんが…。

• 段落内改行と改段落，空白が自由に打てない，表に画像を入れる
• ラベルリンク(解決済み)
• サイドバーの独立，検索・置換，リンクの自動修正

5.サイドバーの独立

（ サイドバーが独立して動かない ）

ＨＰＢのフレーム頁では、左フレーム（メインカラム）と右フレーム が独立しています。
これは別々の頁を一つの頁の上に表示しているからです。
二つの頁は別々のものですから、独立して動きます。
だから、左フレームと右フレームに各々スクロールバーが付き、別々にスクロールできます。

しかし、Word Pressではこれができません。

( 追従と独立は違う )

cocoon には「スクロール追従、メインカラム追従」という機能があります。
これは「どちらかが短い場合に、短い方が長い方を追いかけてくる」というもので、
二つが別々に独立して動くわけではありません。

・サイドバー追従 → サイドバーの頁高さがメインカラムの頁高さより小さい場合
・メインカラム追従 → メインカラムの頁高さがサイドバーの頁高さより小さい場合

次の二つの頁を見比べてください。
①ＨＰＢで作った２フレーム頁 ( 両カラム独立 )
②Word Press/ COCOON で作った頁 ( メインカラム追従 )
③この頁は COCOON の「サイドバー追従」です。

使いやすさなら、断然①の「両方が独立して別々に動く」ことでしょう。

「左右を独立して別々に動かす」ためのプログラム修正も紹介されていますが、
「キャパ越え」となっています。※こちら ・こちら

COCOON さん頼みます！

6.検索・置換

a. Word Pressではプラグインが必要

ＨＰＢでは文字列の検索と置換が簡単にできます。
検索・置換対象の頁も細かく指定できます。

文章を書いているうちに「貼り付け」と「貼りつけ」を混在させた場合、
広告コードに「http://」が含まれているかどうかチェックする場合。
「http://」を「https://」に置き換える場合によく使います。
半角英数字を全角英数字に置き換える場合にも使います。

ところが、Word Pressにはこの機能がついていません。
またまた、プラグインが必要になります。

ネットでよく紹介されている「検索・置換プラグイン」が次の二つ。

① Better Search Replace
② Search Regex

①は検索・置換対象が頁名ではなくデーターベース名で表示されます。
初心者には「どの頁がどのデーターベース名か」わかりません。
①は初心者には向かないでしょう。

②は検索・置換対象が頁名で表示されるので、こちらの方がよいでしょう。
当然、，https:// や <br> や <p> </p>なども検索・置換できる。

b. Search Regex の使い方

・プラグイン有効化 → 「設定」or「ツール」の「Search Regex」をクリック

( 検索 )

・「検索欄」に検索する文字列を入れる → 「置換欄」は無記入
↓
・「検索」
↓
・検索結果が頁ごとに表示される
↓
・表示された頁ごとに編集ができる。表示頁の「操作ボタン / タテ３点」をクリック
↓
①「Replace Row」 → 検索した文字列の置換と削除ができる
・表示枠に「置換したい文字列」を記入 → 確認のため色が変わる → 置換 → 置換される
・シングルと複数の使い分けは不明
・削除 → 確認のために削除される文字列の色が変わる → 置換 → 削除される

②「Edit Page」 → 対象頁を開く → 直接編集 → 更新

③ 「Inline Editor」 → 対象頁を開かずにその場で直接編集 → 保存

④ 「Delate Row」 → 削除
※削除されるのは「検索文字列を含んだ行」ではなく「その頁全体」。しかも完全削除。ゴミ箱を探してもない。
   なぜこのような操作があるのか不明。おかげで１頁を作り直しました。要注意。

（ 置換 ）

・「検索欄」に検索する文字列、「置換欄」に置換する文字列を記入
↓
・「置換する結果」が頁ごとに表示される。（まだ置換されていない）
↓
①「すべて置換する」 → 対象頁すべてについて置換される。

② 対象頁別に置換する場合は該当する頁の「操作 / タテ３点」 → 検索の場合と同じ

( 注意)

・プラグインであるため何が起こるか分からない。検索・置換作業をする前に必ずバックアップを取ること。
・ＨＰＢなら「置換したあとの頁」は残っているが、
   Word Pressは「あちらこちらから材料を持ってきて頁にして見せている」だけ、
   ちょっとした変更でなにがどうなるか分からない。「どうにかなったら」頁を表示させることができない。
   必ずパックアップが必要。ＨＰＢは「現金」、Word Pressは「仮想通過」に例えられるでしょう。

※参考サイト → こちら

7.リンクの自動修正

既存の頁(ファイル)の名前を変えた場合、
他の頁内から張った「その頁へのリンク、その頁の中にある部分へのリンク」が変わってしまうので、
リンクを張り替えなければなりません。
頁数が多い場合には「張り替え箇所」は膨大になり実際に張り替えることは不可能です。
そもそも、書いた本人がどの頁のどこからどの頁のどこへリンクを張ったのか覚えていません。

HPBではこのリンク張替を自動でやってくれますが、
WordPressでは「自動修正してくれない」ようです。
※何らかの操作やプラグインで修正することができるかもしれませんが、今の私には分かりません。

だから、WordPressでのファイル名変更は絶対にやってはいけないことになります。

ただし、この部分は宿題とします。

【広告】
流行りの特定小型原動機付自転車。
バランス能力が鍛えられるかも。