web-dev-qa-db-ja.com

ショートコードを使用してHTMLを追加

ショートコードを持つWordPressプラグインを作成しました。ショートコードは、他のショートコードがあるWordPressページにあります。他のショートコードはHTMLを出力するので、ショートコードからその出力にHTMLを追加したいと思います。

これを実現するためにDOMDocumentとgetElementByIdを使用できるかどうか疑問に思っていました。

WordPressページは次のようなものです。

[Shortcode #1]

[Shortcode #2]

[Shortcode #3]

[date_info]

私のプラグインはこれを行います：

function date_important_info(){

ob_start();
display_date($date);
$html = do_shortcode( ob_get_clean() );
return $html;

function display_date($date){ ?>
    <div style="">
        <span>Date:</span>
        <span><?php echo $date ?></span>
    </div>  
<?php }
}

add_shortcode('date_info','date_important_info');

現在、WordPressページの下部にショートコード出力が表示されます。ショートコードからの出力を、他のショートコードのいずれかによって出力されるHTMLのdivに追加する必要があります。

phpplugin-developmentshortcode
1
zzMzz

まず最初に。値を返す方法がない限り、ショートコード内でechoを実際に使用しないでください。あなたの場合、単に値を返す関数に変換できます：

function date_important_info(){

    return display_date($date);

    function display_date($date){ 
        $data = "
            <div id='my-shortcode' style=''>
                <span>Date:</span>
                <span> {$date} </span>
            </div>";
        return $data;
     }
}

add_shortcode('date_info','date_important_info');

次に、データの追加に関する問題について説明します。 jQueryを使用して、ショートコードのHTML出力を選択し、別の要素に追加できます。以下に簡単な例を示します。

// Get shortcode's content
var content = $('#my-shortcode').outerHTML();
// Add it after the element you want
$('#the-element').after(content);

JQueryで選択できるように、ショートコードのラッパーにIDを追加しました。必要に応じて、.append()または.before()を使用することもできます。

1
Jack Johansson