【WordPress】コピペした時に自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

WordPress で本サイトを作成しています。

IT系のサイトのため、以下のように Teraterm でのコマンド結果をコピペして「コマンドライン」「コマンド結果」を載せることがよくあります。

[test@cent07 ansible]$ ls -l
合計 12
-rw-rw-r--. 1 test test 123 8月 31 22:07 hostlist
-rw-rw-r--. 1 test test 34 8月 31 22:40 json_ansible.cfg
-rw-rw-r--. 1 test test 192 8月 31 22:49 test-check-os-playbook.yml
[test@cent07 ansible]$

 

コマンドの中には、コマンド結果が見やすいように空白でインデントをつけている場合があります。

以下はコマンド結果をそのままスクリーンショットを取ったものです。

綺麗にインデントが入っていて見やすいです。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

以下はコマンド結果をそのまま貼り付けた(コピペした)ものです。

インデントも1行空白行も綺麗に消えています(笑)

パッと見た感じ分かりにくいです。

[root@cent07 ~]# ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.12 netmask 255.255.255.0 broadcast 192.168.1.255
ether 00:0c:29:6b:9d:b5 txqueuelen 1000 (Ethernet)
RX packets 65431 bytes 10219295 (9.7 MiB)
RX errors 0 dropped 13 overruns 0 frame 0
TX packets 6258 bytes 566270 (552.9 KiB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536
inet 127.0.0.1 netmask 255.0.0.0
loop txqueuelen 1 (Local Loopback)
RX packets 4 bytes 340 (340.0 B)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 4 bytes 340 (340.0 B)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

[root@cent07 ~]#

 

 

 

WordPress で「空白スペース」や「空白行」が勝手に消える(自動的に削除される)のを防ぐ方法

調査すると「TinyMCE Advanced」プラグインが入っていて「高度なオプション」「段落タグの保持」にチェックが入っている場合は自動整形されなくなる?という情報があったので、確認してみました。

しかし・・・すでに設定はされてありました。

「TinyMCE Advanced」プラグインの「高度なオプション」-「段落タグの保持」のチェックは効きませんでした。(私の環境だけかもしれません)

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

実際、コピペしてすると以下のようになり、、

[root@cent07 ~]# ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.12 netmask 255.255.255.0 broadcast 192.168.1.255
ether 00:0c:29:6b:9d:b5 txqueuelen 1000 (Ethernet)
RX packets 65431 bytes 10219295 (9.7 MiB)
RX errors 0 dropped 13 overruns 0 frame 0
TX packets 6258 bytes 566270 (552.9 KiB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536
inet 127.0.0.1 netmask 255.0.0.0
loop txqueuelen 1 (Local Loopback)
RX packets 4 bytes 340 (340.0 B)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 4 bytes 340 (340.0 B)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

[root@cent07 ~]#

 

 

その後、コピペ時に消えてしまった「空白スペース」や「空白行」を再度自分でインデント調整すれば以下のように綺麗に成形することはできます。

[root@cent07 ~]# ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
        inet 192.168.1.12 netmask 255.255.255.0 broadcast 192.168.1.255 ← コピペした後に、手入力で「半角スペース」を8個追加してインデントを作っています。
        ether 00:0c:29:6b:9d:b5 txqueuelen 1000 (Ethernet)
        RX packets 65431 bytes 10219295 (9.7 MiB)
        RX errors 0 dropped 13 overruns 0 frame 0
        TX packets 6258 bytes 566270 (552.9 KiB)
        TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

 

lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536
        inet 127.0.0.1 netmask 255.0.0.0
        loop txqueuelen 1 (Local Loopback)
        RX packets 4 bytes 340 (340.0 B)
        RX errors 0 dropped 0 overruns 0 frame 0
        TX packets 4 bytes 340 (340.0 B)
        TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

[root@cent07 ~]#

 

しかし、あとからこのインデントを作る作業をするのが面倒なので、何とかする方法を考えました。

 

 

 

文字実体参照「&nbsp;」で置換する

コマンド結果をコピーしてエディタに貼り付けると、ちゃんとインデントは残っています。

※以下、サクラエディタの例です。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

次にエディタの「置換機能」を利用して「 」(半角スペース)を「&nbsp;」に置換します。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

 

 

置換すると、こんな感じになります。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

これをこのままコピペをしても以下のように改行タグ(<br />)がないので、こんな感じになります。

[root@cent07 ~]# ifconfig ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500         inet 192.168.1.12  netmask 255.255.255.0  broadcast 192.168.1.255         ether 00:0c:29:6b:9d:b5  txqueuelen 1000  (Ethernet)         RX packets 65431  bytes 10219295 (9.7 MiB)         RX errors 0  dropped 13  overruns 0  frame 0         TX packets 6258  bytes 566270 (552.9 KiB)         TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0 lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536         inet 127.0.0.1  netmask 255.0.0.0         loop  txqueuelen 1  (Local Loopback)         RX packets 4  bytes 340 (340.0 B)         RX errors 0  dropped 0  overruns 0  frame 0         TX packets 4  bytes 340 (340.0 B)         TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0 [root@cent07 ~]#

[root@cent07 ~]#

 

そのため、サクラエディタで改行タグも追加します。

(エディタの改行コード「\r\n」を「<br />」に置換します)

 

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

「全て置換」ボタンをクリックすると、こんな感じになります。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

一見すると、おかしく見えますが問題ありません。

これを WordPress のエディタを「テキストモード」にして貼り付けます。

こんな感じになります。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

そして「ビジュアルモード」に変更すると、以下のように綺麗に原型を保ったままコマンド実行結果をコピペ(と言える?)できました。

[test@cent07 ~]$ ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.1.12  netmask 255.255.255.0  broadcast 192.168.1.255
        ether 00:0c:29:6b:9d:b5  txqueuelen 1000  (Ethernet)
        RX packets 73478  bytes 10725485 (10.2 MiB)
        RX errors 0  dropped 13  overruns 0  frame 0
        TX packets 6910  bytes 610223 (595.9 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        loop  txqueuelen 1  (Local Loopback)
        RX packets 4  bytes 340 (340.0 B)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 4  bytes 340 (340.0 B)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

[test@cent07 ~]$

 

 

今回はあえて「プラグイン」を利用しない方法にこだわりました。

しかし意外と手間がかかるので、ツール化するか「プラグイン」を導入するか考えたいと思います。

 

 

 

【追記】最終的にサクラエディタで「マクロ化」したら非常に便利になった

以下の定例作業をマクロ化したら、半角スペースを保ったままコマンド実行結果をコピペするのが楽になりました。

以下、改めて作業手順を作りました。

 

サクラエディタを起動する

新規作成でサクラエディタで起動します。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

コマンドラインの貼り付け

マクロを実行したいコマンドライン結果をエディタに貼り付けておきます。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

キーマクロの記録開始

メニューより「ツール」-「キーマクロの記録開始」をクリックします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

文字列の置換作業

メニューより「検索」-「置換」をクリックします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

置換前:半角スペース

置換後:&nbsp;

「すべて置換」ボタンをクリックします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

以下のように変わることを確認します。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

更にメニューより「検索」-「置換」をクリックします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

 

 

置換前:\r\n

置換後:<br />

「すべて置換」ボタンをクリックします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

以下のように変わることを確認します。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

その他必要な処理

私の場合はテーブルで囲みたかったので、その処理も追加しました。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

キーマクロの終了

メニューより「ツール」-「キーマクロの記録を終了&保存」をクリックして、マクロに分かりやすい名前を付けて保存します。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

 

動作確認

サクラエディタを起動してコマンドラインをコピペします。

【WordPress】自動で空白スペースが消える場合の対処(空白スペースが勝手に消える場合)

 

サクラエディタのメニューより「ツール」-「キーマクロの実行」をクリックします。

マクロで変換されたコマンドラインを WordPress のエディタを「テキスト」モードにしてコピペします。

 

「ビジュアル」モードに戻して確認します。

 

見事にコマンドラインの結果そのままにコピペすることができました!

[test@cent07 ansible]$ ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.1.12  netmask 255.255.255.0  broadcast 192.168.1.255
        ether 00:0c:29:6b:9d:b5  txqueuelen 1000  (Ethernet)
        RX packets 223272  bytes 30291505 (28.8 MiB)
        RX errors 0  dropped 13  overruns 0  frame 0
        TX packets 23393  bytes 2386506 (2.2 MiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        loop  txqueuelen 1  (Local Loopback)
        RX packets 471  bytes 227598 (222.2 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 471  bytes 227598 (222.2 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

[test@cent07 ansible]$

 

何気に私の中では今年一番の作業効率化アイデアだと思っています(笑)

 

 

【追記】タグが含まれているとタグごと消えてしまう問題あり(2017年12月2日追記)

更に追記です。

上記のサクラエディタのマクロ化で問題なく使えていたのですが、ある日タグが消去されていることが分かりました。。

例えば以下のようになります。

 

特定のタグが消えてしまう

マクロ実行後に特定のタグが消えてしまうことが判明しました。

テスト
    <test>
    <テスト>
        <<head>>

    テスト1
    テスト2

 

 

  • タグあり
  • 空白あり

 

以下のようになってしまいます。

英語のタグ(<test>など)が消えています。

テスト
    
    <テスト>
        <

>

    テスト1
    テスト2

 

おかしくなってしまう条件

  • <日本語> ← 消えない。問題なし。【例】<テスト>、<日本語>など
  • <英語> ← 消える。【例】<test>、<head>、<body>など

 

なぜ英語のタグだけ消えてしまうのか

調べたところ、マクロには問題がなくて、WordPress に貼り付けるときに消えていることが分かりました。

 

【マクロ実行後】

マクロ実行後もタグが残っています。

 

しかし、これを WordPress にコピペすると、以下のように消えてしまいます。

テスト
    
    <テスト>
        <

>

    テスト1
    テスト2

 

つまり、原因は WordPress 側が原因でした。

 

 

ただ、よくよく考えてみると、<p>や<span>などの HTML タグは消えて当然です。

もう一度整理すると、

  • タグをそのまま WordPress の記事に掲載したい
  • ビジュアルエディタでタグをそのまま載せることは可能、しかし半角空白文字がすべて綺麗に消えてインデントがなくなってしまう ← そのためマクロを作成した
  • マクロを使う ← テキストエディタを使うため、HTML タグが消えてしまう
  • HTMLタグを載せたい ← ビジュアルエディタしか使えないが、半角空白文字が消える
  • ビジュアルエディタで半角空白文字を残す方法がない ← ないからマクロを作った

 

みごとなデッドロック状態です(笑)

 

【理想】

ビジュアルエディタで、HTMLタグを貼り付けできて、且つ半角空白文字のインデントも保持したい。

→ 現状できない。

 

このような状態です。

 

 

追記【妥協案】

現時点での妥協案です。

  • タグが含まれていない ← 【テキストエディタ作業】マクロを使って「テキストエディタ」から貼り付け
  • タグが含まれている ← 【ビジュアルエディタ作業】一旦サクラエディタで半角文字2つを全角文字に置換してインデントを保って貼り付け

 

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人

コメントを残す

メールアドレスが公開されることはありません。