如何将该PHP代码段转换为Wordpress短代码？

Question

This is a music website with multiple artist pages - one page per artist. New content is added as a post with a Wordpress tag to denote the artist. This is so that I can add a Wordpress loop on each artist page to show all the posts filtered with that artist's tag.

I've got the filtered loop working correctly, but unfortunately it's currently hardwritten inside the page template's HTML, so it's only filtering for one tag. I don't want to create a new page template for each artist, so I'd like to add it to my functions.php file instead, where I can instead create a new shortcode for each artist.

Here's the current code in my page template, which filters the loop for all posts with our seefour tag:

<?php
query_posts( "tag=seefour" );
if ( have_posts() ) { ?>
  <?php while ( have_posts() ) { ?>
    <?php the_post(); { ?>
    <div class="jd-box">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( ); ?>
        <div class="jd-overlay"></div>
        <div class="jd-overlay-text">
          <?php the_title(); ?>
        </div>
      </a>
    </div>
<?php } ?>
<?php } ?>
<?php } ?>

I'm assuming the best option is to turn this into a seefour shortcode inside my functions.php file - how can I achieve this?

Bonus question: is this sustainable in the long run (with 30-50+ artists) or will it cause a lot of redundant code? Open to suggestions...

PS I know this kind of question has been answered already (starting with raw PHP), but since I'm starting with a mix of HTML/PHP (and I'm a PHP newb), I just can't get it to work. So my apologies for asking again.

Answer 1

First of all, you should never ever use query_posts() . It is internal WordPress function to create and maintain the main WordPress cycle. Using it, you can crash your site in unpredictable manner. You should use get_posts() or WP_Query instead.

To have your custom shortcode, add the following to your functions.php:

function showtag_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'tag' => '', // Default value.
    ), $atts );

    $posts = get_posts( 'tag=' . $atts['tag'] );
    if ( $posts ) {
        $output = '';
        foreach ( $posts as $post ) {
            setup_postdata( $post );
            $output .= '<div class="jd-box">';
            $output .= '<a href="' . get_the_permalink( $post ) . '">';
            $output .= get_the_post_thumbnail( $post );
            $output .= '<div class="jd-overlay"></div>';
            $output .= '<div class="jd-overlay-text">';
            $output .= get_the_title( $post );
            $output .= '</div>';
            $output .= '</a>';
            $output .= '</div>';
        }
    } else {
        $output = 'no data';
    }
    wp_reset_postdata();

    return $output;
}

add_shortcode( 'showtag', 'showtag_shortcode' );

This function created [showtag] shortcode with one parameter: tag . You can use this shortcode on any page as follows:

[showtag tag="seefour"]
[showtag tag="disco"]

etc. You will have posts with relevant tags to be shown in place of your shortcode.

Answer 2

Putting a whole loop in a shortcode will make it messy, I know you can use shortcodes in Widgets etc as well but I guess that's not what you're after.

If so, the best option would be to make this code a page template say Artist and pass a variable in URL ie http://example.com/artist?t=seefour and then use the following code in the page template.

<?php
/**
 * Template Name: Artist
 */

query_posts( "tag=" . $_GET['t'] );
if ( have_posts() ) {
?>
  <?php while ( have_posts() ) { ?>
    <?php the_post(); { ?>
    <div class="jd-box">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( ); ?>
        <div class="jd-overlay"></div>
        <div class="jd-overlay-text">
          <?php the_title(); ?>
        </div>
      </a>
    </div>
<?php
    }
  }
}
?>

This can be used for any number of artists, totally flexible because it is dependant on a variable that is provided on run time (when accessed).