web-dev-qa-db-ja.com

投稿画像には常に<figure>を使用する

投稿の全角画像に関するデフォルトの動作は次のとおりです。

  • 画像を単独で挿入すると、このHTML構造体が生成されます：<p><img/></p>
  • 画像キャプション付きを挿入すると、HTML構造が生成されます。<figure><img/><figcaption/></figure>

スタイルを整えるため（標準の段落と比較して画像の周囲の余白を大きくしたい）、キャプションがある場合だけでなく、両方の場合で<figure>を取得したいと思います。どうやってするの？

Edit：気づいたことの1つは、エディタで Visual および Text タブが切り替わるとすぐに、つまりプレビューや保存の前でも、動作が変わることです。役職。多分正しい解決策はどういうわけかWordPressエディタに何に関係なく常に[caption]ショートコードを使わせることでしょう。

imagesfiltersshortcode
4
Borek Bernard

image_send_to_editor フィルターを試すことができます。

/**
 * Wrap the inserted image html with <figure> 
 * if the theme supports html5 and the current image has no caption:
 */

add_filter( 'image_send_to_editor', 
    function( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
    {
        if( current_theme_supports( 'html5' )  && ! $caption )
            $html = sprintf( '<figure>%s</figure>', $html ); // Modify to your needs!

        return $html;
    }
, 10, 8 );

画像がエディタに挿入されたときに、画像のHTMLを変更できます。

上記のフィルタにcurrent_theme_supports( 'html5' )のチェックを追加しました。

add_theme_support( 'html5', array( ... ) );

あなたのテーマに。ただし、このフィルタコールバックを現在のテーマに依存させたくない場合があるので、必要に応じて削除できます。

get_image_tag フィルターを試すこともできます。

更新 ：これは@ bueltgeのコメントからの便利なunautop関数です（読みやすくするため）：

// unautop for images     
function fb_unautop_4_img( $content )
{ 
    $content = preg_replace( 
        '/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', 
        '<figure>$1</figure>', 
        $content 
    ); 
    return $content; 
} 
add_filter( 'the_content', 'fb_unautop_4_img', 99 );
6
birgire

私はこれが受け入れられた答えを持つ古い質問であることを知っています、しかし私はこの答えのthe_contentバージョンを使いました。

これが、正規表現を使ってコードを解析してはいけない理由だと思います。

だから ...私はDOMDocumentを使った別の解決策を思いついた。正規表現ほど短くはありませんが、安定しています。

<?php
add_filter('the_content', function ($content) {
    # Prevent errors so we can parse HTML5
    libxml_use_internal_errors(true); # https://stackoverflow.com/questions/9149180/domdocumentloadhtml-error

    # Load the content
    $dom = new DOMDocument();

    # With UTF-8 support
    # https://stackoverflow.com/questions/8218230/php-domdocument-loadhtml-not-encoding-utf-8-correctly
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content);

    # Find all images
    $images = $dom->getElementsByTagName('img');

    # Go through all the images
    foreach ($images as $image) {
        $child = $image; # Store the child element
        $wrapper = $image->parentNode; # And the wrapping element

        # If the image is linked
        if ($wrapper->tagName == 'a') {
            $child = $wrapper; # Store the link as the child
            $wrapper = $wrapper->parentNode; # And its parent as the wrapper
        }

        # If the parent is a <p> - replace it with a <figure>
        if ($wrapper->tagName == 'p') {
            $figure = $dom->createElement('figure');

            $figure->setAttribute('class', $image->getAttribute('class')); # Give figure same class as img
            $image->setAttribute('class', ''); # Remove img class
            $figure->appendChild($child); # Add img to figure
            $wrapper->parentNode->replaceChild($figure, $wrapper); # Replace <p> with <figure>
        }
    }

    # Turn on errors again...
    libxml_use_internal_errors(false);

    # Strip DOCTYPE etc from output
    return str_replace(['<body>', '</body>'], '', $dom->saveHTML($dom->getElementsByTagName('body')->item(0)));
}, 99);
2
powerbuoy