サポート » バグ報告と提案 » 記事の投稿エディタやテキストウィジェットで編集するとp タグ や br タグなどが消えてしまいます。

  • 解決済 nakah

    (@nakah)


    以下は、WordPress 4.8 からの現象だと思います。

    もしかすると、「記事の投稿エディタ」では、
    WordPress 4.8 以前からあったかもしれません。

    「記事の投稿エディタ」や「テキストウィジェット」で、
    記事やウィジェットを公開または保存した後、

    再度、編集のためテキストエディタを開くと、
    p タグ や br タグなど、一部のタグが消えています。

    一部のタグが消えたまま編集し、更新または保存すると、
    または他の記事に使うためにコピーしペーストすると、

    p タグの段落 や br タグの改行がされないで表示されます。

    ビジュアルエディタで編集しても同じ現象が起きます。

    記事やテキストウィジェットを公開または保存した後も、
    p タグ や br タグなどが消えないようにするには、
    どうしたら良いのでしょうか?

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • CG

    (@du-bist-der-lenz)

    p タグや br タグに限るものと思われます。「一部のタグが消えています。」とある、他に消えるタグは何でしょう。

    すみませんm(_ _)m
    つい筆が走り「一部のタグが消えています」と書いてしまいました。

    ●いまのところ「p タグと br タグ」だけです。
     他の消えるタグは、まだ確認していません。

    CG

    (@du-bist-der-lenz)

    p タグの要素が空ではないですか。要素が空であれば、p タグだけが二重にかかることになるので相殺されているのではないでしょうか。ソース表示でもp タグ、br タグは消えていますか。

    CG様
    返信ありがとうございます。

    再度、確認した結果は以下の通りです。

    p タグの要素は空では無いです。

    ブラウザのソース表示でも p タグ と br タグが消えています。

    一番最初に書いた通りです。
    公開または保存した後で、編集やコピーをするときに起こります。

    これは、テキストエディタとビジュアルエディタの両方ともです。

    「一部のタグが消えています」だけが誤りです。

    こんにちは

    記事の投稿エディタで、保存後 何らかの理由で、ビジュアルモードで投稿が開いたりしていませんか?

    ビジュアルモードに移動すると、テキストモードで入力したP要素は除去されます。

    これを回避したい場合は、

    <p class="hello-world">hello</p>

    クラスを追加しておくと いいかもしれません。

    nobitaさま
    返信ありがとうございます。

    まず、私は、このフォーラムの使い方がよく分からないまま、
    「バグ報告と提案」の所にトピックを書いてしまっていて、
    本当は、質問や要望という場所があるなら、そこに書くべきだったと反省しています。

    nobitaさんが書いている通り、
    私は、ビジュアルモードとテキストモードを行き来して確認しながら、
    記事やテキストウィジェットを書いています。それが原因なんですね。

    <p class=”hello-world”>hello</p>
    ということは、css に書いてない 空の class ということでしょうか?
    css に例えば hello-world という名前の class を書くということでしょうか?

    html も初心者なので、変なこと書いていたら、すみません。

    —–

    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpautop

    上記に記載されているように、functions.php に下記を追加をしたところ、
    段落も改行もされなくなってしまいました。これは私には使いづらいです。

    remove_filter( ‘the_content’, ‘wpautop’ );

    —–

    https://www.nishi2002.com/8948.html

    上記に記載されているように、TinyMCE Advancedプラグインをインストールして、
    「段落タグの保持」にチェック入れたら、
    記事の投稿のテキストエディタでは pタグ と br タグが表示されました。

    しかし、テキストウィジェットでは、やはり pタグ と br タグが表示されませんでした。

    Black Studio TinyMCEプラグインをインストールすると、ウィジェットでビジュアルエディタが使えました。
    pタグ と br タグも表示されます。

    ただ、プラグインは、できるだけ少なくしたいのです。

    —–

    外部のサイトを書くのは良くないのかもしれませんが、

    http://qiita.com/jyokyoku/items/c560b0d1eacc1df61620

    https://laplace.link/wordpress-cms/htmltag-disappears/

    上記にも関連する記事がありました。

    —–

    私は初心者で分からないのですが、

    普通の htmlエディタ(ビジュアルモード付き)のように、pタグ や br タグを表示させたまま、
    ビジュアルモードとテキストモードを行き来して確認しながら、

    記事やテキストウィジェットを書いたり編集したり、
    書いたものをコピーして、他にペーストして利用するようにすることは、
    WordPress では、まだ、いろいろな事情で、難しいことなんですね。

    htmlエディタ(ビジュアルモード付き)の仕組みが不要な方もいるかもしれませんが、
    また、私は、いまは提案することしかできませんが、ぜひ上記の仕組みを追加して欲しいです。
    将来の改良に期待します。

    CG

    (@du-bist-der-lenz)

    書いたものをコピーして、他にペーストして利用するようにする時に、HTMLタグも一緒に必要な時は、ソース表示してコピーを取って、転用しています。
    そして、テキストエディタとビジュアルエディタを行き来するような投稿作成も、わたしはしていないません。テキストエディタで作成するのが楽な投稿もありますし、そのためのビジュアルエディタを使うかの判断をプロフィールのページで決めさせているのでしょう。
    テキストエディタで作成したあとで、ビジュアルエディタに移動すると自動整形される、と理解していると良いでしょう。

    CGさま
    返信ありがとうございます。

    そうですね。ソースを表示してコピーすればできますね。

    私は、WordPressを去年の10月ころから利用しています。

    今はまだ、ビジュアルエディタで書いて、テキストエディタで確認や編集をして、またビジュアルエディタや実際のブラウザ表示で確認や編集したりして、行きつ戻りつ書いています。

    プロフィール(ユーザー設定)で「ビジュアルリッチエディターを使用しない」を試しましたが、私はまだ、テキストエディタのみでの作成は難しかったです。

    テキストエディタで作成したあとでビジュアルエディタに移動すると「自動整形」される、について理解しました。

    nobita

    (@nobita)

    ビジュアルエディタとテキストエディタを切り替えながら、投稿を作成するといった作業をして、「あれ、pタグが消えてしまったとか、」といった質問は、このフォーラムでもよくあります。

    という事は、結構みんなそういう作業をしているという事なのだと思います。table要素などを使って、複雑なhtmlをテキストモードで、入力して 表示のプレビュー代わりにビジュアルモードで確認すると、あれー、苦労して書きだしたテーブル要素がぐちゃぐちゃになってしまうとか、水の泡になってしまう事を何とか回避しようと、プラグインで何とかしようとか、wpautopを無効にしてやろうとか いろいろな試みのメモがWEB上にはたくさんあります。

    解決しようとして、試行錯誤する事で 深みにはまってエネルギー切れになるという事もあります。

    釈迦に説法かもしれませんが、書き方のコツを覚えるといいように思います。

    テキストモードでは、改行を2回つけると、自動的にpタグで囲まれる。改行が一つならbrが挿入される。

    ビジュアルモードなら、shift+enterを押すとbrが差し込まれて、enterならpで囲われる。

    これで、p要素のコントロールは出来るようになります。

    厳密には、余計な部分がp要素で囲まれるといった事も起こりますが、次第に良くなってきていますので、実用に耐えると思います。

    テキストモードで<p class="何かしらのクラス">を書くと、その部分はビジュアルから戻っても消えない理由は、
    ビジュアルモードでは<p>は、あっ、これはp要素だから、ビジュアル用の改行と&nbsp;に置換してしまえ、という自動的な処理が行われるのですが、<p class="hoge">なんて書いてあると、これp要素じゃないみたいだから、そうっとしておこうという事で、そのまま残ります。(たまたま、pの場合はそういう風になるというだけの事)

    ビジュアルモードは、改行とボタンで、うまい具合にhtmlを作る事は出来ますが、htmlで書かれたものを、理解してビジュアルモードでうまく表示するのはあまり、上手にできないのです。

    なので、ビジュアルとテキストを切り替えるよりも、プリビューで表示しながらうまくできているかどうかを確認するほうが、簡単だと思います。

    • この返信は2 週間前に  nobita さんが編集しました。
    nakah

    (@nakah)

    nobitaさま。

    詳しい説明を、ありがとうございます。
    ものすごく良く分かりました。大感謝です。

    facebookやLINEなどもそうですが、
    WordPressも書き方のコツを覚えればいいのですね。

    プレビューで確認しながら編集することをしてみます。

    試行錯誤の深みにはまって五里霧中になる前に脱却できました。
    記事を書くことに専念できそうです。

    皆さまも重ねて、ありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。