web-dev-qa-db-ja.com

無効にする WP 画像の後に自動的に挿入された改行

私は中サイズの画像をカスタムサイズに設定しました。これは両方の画像がポスト内で水平に並ぶことを可能にするはずです。 （全ポスト幅は880ピクセル、中画像は413ピクセルに設定されています。）

私の課題は、画像が均等に配置されていないということです。右側の画像は、すぐ下に別の中画像のグループがある場合を除いて、常に少し低くなります。

これはWPが画像の後に自動的に改行を挿入することと関係があるかもしれませんが、これを無効にしようとしたいくつかの方法は成功していません..

私がポストに入れたもの：

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

ブラウザによって読まれるもの：

<p><img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><br />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /><br />

試みられた（失敗した）解決策 - 1 画像の後の改行を無効にするにはどうすればいいですか？ 2 フローティング画像の後にWordpressで改行が追加されるのはなぜですか。

サイトリンク。

enter image description here

postsfunctionsimagesformattingline-breaks
5
user1255049

このように見える場合：

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

それなら、あなたはそれらを以下のようにまとめる必要があります。

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

なぜならば（ wpautop ）：

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );

あなたはたぶんあなたが書いたすべてを壊すでしょう、それはそれの価値がありません。

7
jocken

簡単な解決策は、Divタグであなたの画像タグをラップすることです。それはWPがPタグでイメージをラップするのを防ぎます。その後、外観/配置をさらに制御するためのクラスをdivに与えることができます。

4
Ray Gulick

wpautop()関数をフックすることはできません。なぜならそれはそれがすべての段落を切り取りそして内容からタグを壊すからです。

画像をエディタに挿入したら、エディタの右上隅にある[ テキスト ]タブをクリックして、画像の間にある段落タグと段落タグを削除します。

その他のオプション（配置やその他の属性など）を表示するには、画像をクリックしてから、[ 詳細設定 ]オプションを使用して適切に設定します。

1
TBI Infotech

それは<br>タグです が正しいのですが、代わりの方法があります。

各画像を隣接する行ではなく、それぞれ独自の段落に配置する

これがWordPressコンテンツでの改行の仕組みです。

段落

This is paragraph 1

This is paragraph 2

短い改行

This is paragraph 1
This is also paragraph 1 but on a new line without a space

短い段落は使わず、段落全体を使ってください。たとえば、段落タグで囲まれたそれぞれの行にそれらを配置すると、うまくいきます。

だから代わりに：

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

行う：

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />

<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

各画像はそれぞれ独自の段落タグで囲まれているので、次のような出力が得られます。

その結果、

holy moly, the alignment issue has vanished

あなたが冒険的であると感じているならば、あなたは完全に（フロントエンドで）画像の周りのpタグを削除することができます、しかし私はあなたのサイトでそれをすることに対してお勧めします。あなたがそれをする方法に興味があるならば、別の質問をしてください。

1
Tom J Nowell

問題が<br>タグ（正しいと思う）であり、投稿を戻って編集したくないという1つのコメントに基づいている場合、the_contentフィルタを使用して2つの中型のインスタンスを探すことができます画像は改行（WordPressのwpautop()関数の一部として<br>タグに置き換えられています）だけで区切られています。

add_filter( 'the_content', 'gowp_152091' );
function gowp_152091( $content ) {
  preg_replace( "/(<img.*?size-medium.*?>)\n(<img.*?size-medium.*?>)/", "$1$2", $content );
  return $content;
}

参考文献：

the_content

機能： preg_replace

0
karpstrucking

画像間の改行タグを削除してください。

例：

<img src="" alt="" /> <br/> <img src="" alt="" />
0
René Skou

wpautop()関数は、改行を保持するために<p>タグと<br>タグをコンテンツに追加します。これらのタグを自分で追加する場合は、投稿コンテンツにこの機能を適用するフィルタを削除できます。

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );


remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );
0
TBI Infotech

JQueryを使ってそれらを削除することもできます。

jQuery(document).ready(function($){
    $('img').next('br').remove();
});

この should nextは直後の要素を選択するので、画像の後のbrタグを削除します。それでも問題が解決しない場合は、代わりに.nextAll('br:first')を試すことができます。

より多くの例やあなたが試すことができるものについては ここ を見てください。

0
sMyles