将WordPress生成的内容分成两个div

时间:2013-08-28 16:02:36

标签: php jquery html wordpress wordpress-theming

我正在尝试将静态HTML网站转换为WordPress主题。目前,有以下(静态)代码:

<div class="postwrap">
    <div class="first-col">

        <!-- Post Description -->
         <h1>Post Title</h1>
        <p>Post description. At essimag nimilib errorum fuga. Harunt faci aut elitatur.</p>

    </div>
    <div class="second-col">

        <!-- Post Images -->
        <img src="images/placeholder.png" alt="This is a photo">

    </div>
</div>

如您所见,first-col中的所有内容都是基于文本的。 second-col中的所有内容都是图片,WordPress只使用<?php get_content(); ?>抓取此内容。

有没有办法可以将提交的图像分类到单独的div中,例如second-col?我知道这可以用jQuery完成,但我想知道是否有PHP或WordPress的方法。

1 个答案:

答案 0 :(得分:4)

是的,您可以使用以下代码显示已上传/附加到帖子/页面的任何图像。

<div class="second-col">

    <?php
    // Get all images uploaded/attached to this post/page.
    if (
        $images = get_posts(
            array(

                'post_parent'       =>  get_the_ID(),
                'post_type'         =>  'attachment',
                'post_mime_type'    =>  'image',
                'orderby'           =>  'menu_order',
                'order'             =>  'ASC'

                )
            )
        ) :

    // Loop through the results and display each full-size image.
    foreach( $images as $image ) :
        echo wp_get_attachment_image( $image->ID, 'full' );
    endforeach;

    endif;
    ?>

</div>

get_posts()是一个WordPress函数,它根据我们传递给它的参数返回一个帖子数组。然后我们遍历该数组并在其中的每个值上调用wp_get_attachment_image()函数。 wp_get_attachment_image()是另一个返回HTML图像元素的WordPress函数。

要仅在第二列显示图像,请勿将它们插入帖子/页面。只需从帖子/页面编辑屏幕上传它们,然后关闭模态窗口并更新帖子/页面。您还可以从媒体库上传图像并将其附加到所需的帖子/页面。