Question

我正在尝试创建一个1：1的围带，但必须有一种整齐的方法。我将每天编辑此文本和图像，因此需要使它整洁并易于确定是什么...这是我到目前为止所做的，这远非理想...

我想通过短代码来实现，但是我不确定如何实现。也许有人在这里可以帮助我？

我确实尝试过，但是我不知道自己在做什么...

 // Add Shortcode
function AdvisoryFunc( $atts ) {

    // Attributes
    $atts = shortcode_atts(
        array(
            'text' => 'text',
            'image' => 'IMG',
        ),
        $atts,
        'AdvisoryTag'
    );

}
add_shortcode( 'AdvisoryTag', 'AdvisoryFunc' );

Answer 1

一个更简单的选择是通过在外观>自定义>其他CSS部分粘贴一些CSS，从而使用一个更简单的网格：

@media (min-width: 768px){
    .grid { width: 100%; display: table; table-layout: fixed; }
    .grid > * { display: table-cell; }
}

这将使您可以在页面上执行以下操作

<div class="grid">
    <div>Text</div>
    <img src="/path/to/img" />
</div>

或者，您可以考虑使用“自定义帖子类型”，既可以与CPT API结合使用，也可以与类似的CTP UI插件等插件一起使用。在这里，您可以制作一个Post Type Template或Page Template，以从最新帖子中提取“内容和精选图片”。坦白地说，这可能就是我要穿的鞋，因为这将为更新/管理状态以及提供以前状态的记录提供一条更轻松的途径，但要花费更多的“设置”时间。

最后，如果您只想使用简码，则可以使用以下代码：

add_shortcode( 'advisory_tag', function( $atts ){
    extract( shortcode_atts( array(
        'text'  => 'Placeholder Text',
        'image' => '/placeholder/image.jpg'
    ), $atts ) );

    ob_start(); ?>

    <div class="section group">
        <div class="col span_1_of_2"><?= $text; ?></div>
        <div class="col span_1_of_2">
            <a href="<?= $image; ?>" target="_blank" title="Click to Enlarge" rel="noopener" style="outline: none;">
                <img src="<?= $image; ?>" alt="Advisory Image for <?= date( 'l, F jS, Y' ); ?>" />
            </a>
        </div>
    </div>

    <?php $ob = ob_get_contents();
    ob_end_clean();

    return $ob;
});

然后您所要做的就是在帖子中使用[advisory_tag text="Some Text Here" image="link/to/image.jpg"]，并根据需要进行更新

Answer 2

您可以执行以下操作：

function AdvisoryFunc( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'image' => '',
    ), $atts );

    return '
        <div class="section-group">
            <div class="col-1">' . $content . '</div>'
            <div class="col-2"><img src="' . $a['image'] . '"></div>
        </div><!-- /section-group -->';
}

add_shortcode( 'AdvisoryTag', 'AdvisoryFunc' );

然后，您将像这样使用它：

[AdvisoryTag image="http://www.examplesite.com/wp-content/uploads/2018/07/image.jpg"]Your html content goes here[/AdvisoryTag]

您将必须调整return语句中的HTML以匹配您的HTML结构（类和图像属性），但这将使您接近完成它。

创建一个简码

2 个答案: