WordPress AMP相關文章與分享按鈕

自從Google推出行動加速頁面計畫後，
WordPress在AMP這方面竭盡所能地開發，
相關功能越來越豐富，
除了新增常見的GoogleAnalytics與AdSense功能之外，
還能增加文章頁面需要的分享按鈕與相關文章功能，
讓AMP頁面更加豐富。

以下代碼需要放置在WordPress網站佈景的functions.php上，
建議站長們設定佈景子主題以避免主題更新造成代碼遺失。

1.AMP社群分享按鈕

以下代碼為分享FB、Twitter按鈕

//AMP社群分享
add_action( 'pre_amp_render_post', function () {
 add_filter( 'the_content', function( $content ){
 $post = get_post();
 if( is_object( $post ) ){
 $facebook = add_query_arg( array(
 'u' => urlencode( get_permalink( $post->ID ) )
 ), 'https://www.facebook.com/sharer/sharer.php'
 );
 $twitter = add_query_arg( array(
 'url' => urlencode( get_permalink( $post->ID ) ),
 'status' => urlencode( $post->post_title )
 ),'https://twitter.com/share' );
 }
 $share = sprintf( '<hr /><ul id="amp-share" class="amp-list">分享： <li id="facebook-share"><a href="%s" title="Share on Facebook" target="_blank">Facebook</a></li><li id="twitter-share"><a href="%s" title="Share on Twitter" target="_blank">Twitter</a></ul>', esc_url_raw( $facebook ), esc_url_raw( $twitter) );
 $content .= $share;
 return $content;
 }, 1000 );
});

參考教學 http://torquemag.io/2016/03/making-amp-wordpress/

2.AMP相關文章

2016/10/10更新

新版AMP配置相關文章應先調整single.php配置

<?php do_action( 'amp_post_template_footer', $this ); ?>

請移動到<?php $this->load_parts( array( ‘footer’ ) ); ?>前一行的位置並保存。

以下代碼為顯示五篇相關文章

//AMP相關文章
function my_amp_related_posts( $count = 5 ) {
 
 global $post;
 $taxs = get_object_taxonomies( $post );
 if ( ! $taxs ) {
 return;
 }
 
 // ignoring post formats
 if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
 unset( $taxs[$key] );
 }
 
 // try tags first
 
 if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
 $tax = 'post_tag';
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
 }
 
 // if no tags, then by cat or custom tax
 
 if ( empty( $tax_term_ids ) ) {
 // remove post_tag to leave only the category or custom tax
 if ( $tag_key !== false ) {
 unset( $taxs[ $tag_key ] );
 $taxs = array_values($taxs);
 }
 
 $tax = $taxs[0];
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
 }
 
 if ( $tax_term_ids ) {
 $args = array(
 'post_type' => $post->post_type,
 'posts_per_page' => $count,
 'orderby' => 'rand',
 'tax_query' => array(
 array(
 'taxonomy' => $tax,
 'field' => 'id',
 'terms' => $tax_term_ids
 )
 ),
 'post__not_in' => array ($post->ID),
 );
 $related = new WP_Query( $args );
 
 if ($related->have_posts()) : ?>
 
 <aside>
 <h3>相關文章</h3>
 <ul>
 
 <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
 <li><a href="<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
 <?php endwhile; 
 wp_reset_postdata(); ?>
 
 </ul>
 </aside>
 
 <?php endif;
 
 }
 
}
 
/**
 * Add related posts to the AMP template footer
 */function my_add_related_posts_to_amp( $template ) {
 ?>
 <div class="amp-wp-content">
 <?php my_amp_related_posts(); ?>
 </div>
 <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );

更改相關文章數量請直接修改$count = 5的數值即可。

參考教學 http://isabelcastillo.com/related-posts-wp-amp

分享：
• Facebook
• Twitter