Wordpress 将 php 和 html 模板转换为简码

Question

我想用这个 php 代码制作一个简码，用 css 网格显示最近的博文。我正在显示有关每个博客的图像和其他元数据。

<div class="wrapper">
    <?php $q = new WP_Query( 'posts_per_page=3' ); ?>

    <div class="recent-blogs">
      <?php while ( $q->have_posts() ) : $q->the_post(); ?>

        <div class="blog-item">
          <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

          <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>    
          <img class="image" src="<?php echo $url ?>" />

          <div class="avatar"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
          <div class="author"><?php the_author_posts_link(); ?></div>
          <div class="time"><?php the_time('m.d.y'); ?></div>
          <div class="category"><?php the_category(); ?></div>
          <div class="comments"><?php comments_number(); ?></div>
          <?php the_excerpt(); ?>
        </div>

      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>

    </div>    
</div>

基本上，在所有内容之后，模板现在显示在 page.php 中，我想通过我的页面构建器获得更多控制，以便我可以将其放置在我想要的位置。我的 php 技能很差，我尝试将 html 连接成一个字符串，但由于循环和所有这些 php 变量，我总是搞砸了。还尝试使用 ob_start()、ob_get_clean() 和 ob_get_contents() 但由于某种原因我最终得到了一个无限循环。

function recent_blogs_grid() {}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');

Answer 1

我最终解决了它，我不必像下面的第一个代码那样用艰难而愚蠢的方式来做。

function recent_blogs_grid() {        
    $q = new WP_Query( 'posts_per_page=3' );

    echo '<div class="recent-blogs-wrapper">';
        echo '<div class="recent-blogs-gallery">';

        while ( $q->have_posts() ) : $q->the_post();            
            echo '<div class="recent-blogs-item">';
                echo '<h3 class="blog-title-meta"><a href="';
                echo the_permalink();
                echo '">';
                echo the_title();
                echo '</a></h3>';

                $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
                echo '<a href="';
                echo the_permalink();
                echo '"><img class="blog-image-meta" src="';
                echo $url;
                echo '" /></a>'; 

                echo '<div class="blog-metadata-wrapper">';
                    echo '<div class="blog-avatar-meta">';
                    echo get_avatar( get_the_author_meta('ID'), 40);
                    echo '</div>';

                    echo '<span class="blog-author-meta">';
                    echo the_author_posts_link();
                    echo '</span>';

                    echo '<span class="blog-datetime-meta"><i class="fa fa-clock-o"></i>';
                    echo the_time('m.d.y');
                    echo '</span>';

                    echo '<span class="blog-category-meta"><i class="fa fa-tags"></i>';
                    echo the_category();
                    echo '</span>';

                    echo '<span class="blog-comments-meta"><i class="fa fa-commenting"></i>';
                    echo comments_number();
                    echo '</span>';
                echo '</div>';

                echo the_excerpt(); 

                echo '<a class="blog-read-more" href="';
                echo the_permalink();
                echo '">Read More</a>';

            echo '</div>';

        endwhile;
        echo '</div>';

    echo '</div>';
    wp_reset_query();
}

我只是将原始代码粘贴到另一个文件中，并将其导入到我创建短代码的函数中。由于我无法编辑我提出的原始问题，因此这是其自身文件 "recent-blogs-grid-shortcode.php".

中的原始 html 内容

<div class="recent-blogs-wrapper">
  <?php $q = new WP_Query( 'posts_per_page=3' ); ?>

  <div class="recent-blogs-gallery">

  <?php while ( $q->have_posts() ) : $q->the_post(); ?>

    <div class="recent-blogs-item">

      <h3 class="blog-title-meta">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </h3>

      <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>

      <a href="<?php the_permalink(); ?>">
        <img class="blog-image-meta" src="<?php echo $url ?>" />
      </a>

      <div class="blog-metadata-wrapper">
        <div class="blog-avatar-meta"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
        <span class="blog-author-meta"><?php the_author_posts_link(); ?></span>
        <span class="blog-datetime-meta"><i class="fa fa-clock-o"></i><?php the_time('m.d.y'); ?></span>
        <span class="blog-category-meta"><i class="fa fa-tags"></i><?php the_category(); ?></span>
        <span class="blog-comments-meta"><i class="fa fa-commenting"></i><a href="<?php the_permalink(); ?>"><?php comments_number(); ?></a></span>
      </div>

      <?php the_excerpt(); ?>

      <a class="blog-read-more" href="<?php the_permalink(); ?>">Read More</a>

    </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  </div>          
</div>

我刚刚使用 require 来将它导入我的函数

function recent_blogs_grid() {
    require_once('recent-blogs-grid-shortcode.php');
}

add_shortcode('recent_blogs_grid', 'recent_blogs_grid');

Wordpress 将 php 和 html 模板转换为简码

Wordpress convert php and html template to shortcode

php

wordpress

wordpress-shortcode