捐血一袋救人一命

江蘇拙政園

江蘇 拙政園

全家福

日本 和歌山城

賞楓之旅

千燈 夕照

水鄉千燈

蘆洲 微風運河

破曉時分

2016年11月24日 星期四

針對特定 Post/Page/Porfolio 定義 CSS 樣式

每一篇 post 或是 page 或是其他頁面型態,都會有一個獨一無二的 ID代碼。

如果要想針對特定頁面定義 CSS,不想影響全部的頁面的話,可以利用 Google Chrome Browser,利用它先找到你要定義 CSS 的目標,然後在該 element 上按下滑鼠右鍵,選擇 Copy → Copy Selector,然後去 wordpress 的 佈景主題樣式表 style.css 中,去新增你的定義!

例如:

#post-721 > div > div > div > a.title{
        display:block;
        width:150;
}

#post-721 > div > div > div{
        display:block;
        float:left;
        width:33%;
}

#post-721 > div > div > div:hover{
border: 1px solid #021a40;
padding: 1px;
}
#post-721 > div > div > div{
border: 0px;
padding: 0px;
}

如何修改 Continue reading 文字

首先要去查一下佈景主題裡 哪裡呼叫執行,通常是在 functions.php

add_filter( 'get_the_excerpt', 佈景主題自定的 Reading More函式名稱' );
add_filter('excerpt_more', 佈景主題自定的 Reading More函式名稱');
add_filter('the_content_more_link', 佈景主題自定的 Reading More 函式名稱');

以上三個是佈景主題呼叫 add_filter 去修改 wordpres 內定 Read more 文字。
如果有發現的話,記下佈景主題的函式名稱,
然後在 functions.php 程式碼最後呼叫執行對應的

remove_filter( 'get_the_excerpt', 佈景主題自定的 Reading More函式名稱' );
remove_filter('excerpt_more', 佈景主題自定的 Reading More函式名稱');
remove_filter('the_content_more_link', 佈景主題自定的 Reading More 函式名稱');


接下來寫好自定 Read More 函式,再去呼叫 add_filter,讓你自定的函式與 wordpress 掛勾(hook)

例如:在 Twenty Eleven 佈景主題

remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );

function my_excerpt_more($more) {
    global $post;
    return '<a class="moretag" href="'. get_permalink($post->ID) . '">繼續閱讀</a>';
}
add_filter('excerpt_more', 'my_excerpt_more');

remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );

function my_continue_reading_link() {
    return ' <a class="moretag" href="'. esc_url( get_permalink() ) . '">' . __( '繼續閱讀 <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';
}

function my_custom_excerpt_more( $output ) {
    if ( has_excerpt() && ! is_attachment() && ! is_admin() ) {
        $output .= my_continue_reading_link();
    }
    return $output;
}
add_filter( 'get_the_excerpt', 'my_custom_excerpt_more' );

PS.如果佈景主題本身有定義 Read More 文字,你卻沒呼叫 remove_filter ,會造成新舊 Read More 文字都同時出現。