WordPress用外掛加入特色圖片並調整CSS

Spread the love

【聲明】本站任何文章都可能有聯盟行銷連結，當你透過文章內的連結購買產品，我可能獲得分潤，這不會增加你任何成本，並且我分享的都是自己實際使用過的資訊，更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.

用外掛加入特色圖片並加入調整用的CSS，

雖然我不是很理解為何要這樣大費周章，不過就當練習改寫完順便記錄

<?php
/*
Plugin Name: Add Featured Image Before Content In Any Theme
Plugin URI: https://wpsites.net/web-design/add-featured-image-before-content-in-any-theme/
Description: @copyright 2014 WP Sites
Version: 1.0.9
Author: Brad Dalton / Pathwaysoft
Author Email: [email protected]
*/
//若仅在某些页面加载，利用WordPress的Conditional Tags即可。

//https://codex.wordpress.org/Conditional_Tags
//https://www.solagirl.net/wordpress-ways-to-load-js-css.html
add_filter( ‘the_content’, ‘wpsites_image_before_content’ );

function wpsites_image_before_content( $content ) {

if ( is_singular(‘post’) && has_post_thumbnail()&& in_category( array( 3,4 ) ) ) {

wp_enqueue_style(‘wpsites_image_before_content’, plugin_dir_url( __FILE__ ) . ‘/css/wpsites_image_before_content.css’ );

$img = get_the_post_thumbnail($post_id, ‘full’, array(‘class’ => ‘image_before_content’));

$content = $img . $content;

}

return $content;
}

外掛裡面css資料夾的 wpsites_image_before_content.css內容如下

.image_before_content {
float:left;
padding: 10px;
}

參考資料：

https://wpsites.net/web-design/add-featured-image-before-content-in-any-theme/