0

我正在尝试创建一个我已经完成的 1:1 网格，但必须有一个更整洁的方式。我每天都会编辑这个文本和图像，所以需要它整洁且易于确定什么是什么......这是我到目前为止所做的，这远非理想......

我想通过短代码来做，但我不知道如何处理它。也许这里有人可以帮助我？

 // Add Shortcode
function AdvisoryFunc( $atts ) {

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

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

2 回答 2

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插件。从那里你可以制作一个帖子类型模板或一个页面模板，从最近的帖子中提取内容和特色图片。老实说，这可能是我会在你的鞋子里做的，因为它可以更轻松地更新/管理状态以及提供以前状态的记录，但代价是有更多的“设置”时间。

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

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;
});

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

于 2018-07-25T17:21:59.463 回答
0

你可以这样做：

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 结构（类和图像属性），但这应该让您非常接近完成它。

于 2018-07-25T17:18:01.707 回答