編輯style.css無效、自訂WordPress字型和多層次編號、客製佈景主題的CSS、調整版面配置等問題load the latest version of style.css

腫魔沒人留言?快點下去搶頭香啊!

老樣子先上參考資料:

  1. WORDPRESS DEVELOPMENT:Cannot get Child Theme to load latest version of style.css
  2. WORDPRESS.ORG:Styling Lists with CSS
  3. w3schools:CSS Web Safe Font CombinationsCSS list-style-type Property
  4. STACK OVERFLOW:Html ordered list 1.1, 1.2 (Nested counters and scope) not working

其實只要解決每次載入不會更新成最新版的style.css問題,之後就用主題編輯器編輯style.css樣式表就會生效,

而這一切就是要去修改佈景函式庫functions.php(權限不足的話就只能到本機修改,路徑在\xampp\htdocs\wordpress\wp-content\themes[佈景主題名稱]\)

搜尋wp_enqueue_scripts,就會找到如下程式碼片段:

add_action( 'wp_enqueue_scripts', 'XXXXX' );

XXXXX是該片段之前有宣告過的函式,通常在它上面一點點,通常如下:

function XXXXX() {
    ...(略)...
    wp_enqueue_style( 'XXXXX-style', get_stylesheet_uri() );
    ...(略)...
}

這裡要改成每次都抓最新的style.css,改成如下:

function XXXXX() {
    ...(略)...   
    //抓最新style.css寫法
    wp_enqueue_style( 'XXXXXX-style', get_stylesheet_uri(), NULL, filemtime( get_stylesheet_directory() . '/style.css' ) ); 
    ...(略)...
}

然後就可以把所有字型改成我最愛的Arial,把有font-family的片段都改成這樣即可

font-family: Arial, Helvetica, sans-serif;

至於項目符號也是改style.css,加入以下程式碼片段:

ol {
    counter-reset: item;
}
ol > li {
    counter-increment: item;
}
ol ol > li {
    display: block;
}
ol ol > li:before {
    content: counters(item, ".") ". ";
}

最後結果呈現如下:

  1. 1
  2. 2
    1. 2.1
    2. 2.2
      1. 2.2.1
        1. 2.2.1.1
        2. 2.2.1.2
0 0 vote
Article Rating
訂閱(Subscribe)
來自於(Notify of)
0 Comments
Inline Feedbacks
View all comments