Add Me!Close Menu Navigation
Add Me!Open Categories Menu

在functions.php增設博客自訂代碼

取出部份譯自WordPress のよくあるカスタマイズコード functions.php 多め – Webデザインレシピ

素敵な記事を書いてくれて、ありがとうございました!

大家都知道在functions.php除了可以自定義博客主題的功能外,其實對於博客系統--Wordpress本身,多加利用functions.php也能自訂系統內部。

哎,我日文還不是很熟練,只能翻到看得懂的程度…有錯請提點一下。

全文中只有第二大點有關分享按鈕的沒翻譯,因為能取代的應用或插件實在是太多…我想未必一定要用functions.php加插分享按鈕。
全文的博客系統的項目名稱全部以台灣正體中文版為主。


這是一篇給自己寫Wordpress主題時,經常會用到的代碼的集大成。主要是展示很多在functions.php寫下的簡單代碼。我(指原作者,以下同)從事網頁製作,所以文章後半部分是一些面向客戶而折騰出來的代碼。

我經常用Evernote,可是也記下了很多有關Wordpress自訂代碼的文章,於是把亂七八糟的文章整理了一遍… X( 從中只整理了在一般會用到的代碼。代碼都是我個人經常會用到的,真想把它們整理在一個地方~這樣想著就寫下這篇備忘。全部皆在Wordpress 3.2版本開始測試成功。

在 WordPress 經常會有的自訂代碼:目錄

  1. 設定關連
  2. 摘錄表示、the_excerpt 關連
  3. 限制要顯示的標題文字數量
  4. 把特定的文字轉換成連結
  5. 在側欄的分類列表中加上圖標
  6. 顯示favicon
  7. 在搜尋結果中消除特定頁面
  8. 想把自訂欄位用在文章循環外
  9. 增加縮圖至RSS feed中的摘要發布
  10. 也為管理介面添加favicon
  11. 改變HTML編輯器的字型
  12. 讓文章能加插獨立CSS
  13. 面對客戶?的自訂方法

1. 設定關連

1.1. 改變可上傳檔案的大小

除非你有上傳圖片的需要,否則這個功能其實都不太重要。但如果你要在其他博客匯入文章時,檔案有可能會很大。
這個時候就需要修改上傳檔案的大小,不過這項功能並不是在Wordpress中修改,而是出於主機的設定。所以,一般的更改都會在php.ini進行。

↑ 指這個。

php.ini

1
2
3
4
upload_max_filesize = 32M
post_max_size = 64M
/* 錯誤表示 */
display_errors = Off

更改的部份是在upload_max_filesize。如果無任何更改的話,應該會有8M限制吧?也拿post_max_size一塊兒檢查吧,不管你如何更改upload_max_filesize,如果post_max_size的數值比它小的話就會悲劇了…。

我經常直接在php.ini中折騰,不過有部份的可能並不允許直接編輯。其實也是有辦法用.htaccess寫成的,請看下面(雖然有被提醒了不過其實我還沒幹過這種事所以就當成參考吧)。

1
2
3
4
php_value upload_max_filesize 32M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

1.2. 禁止自我引用文章

在Wordpress中,如果在文章中插入了他人博客的連結,就會自動發送引用給該博主(trackback)。可是,如果在文章中貼上自己過去文章的連結,也一樣會收到通告(pingback)。應該有很多人覺得這個蠻討厭的吧。
因此,我們要禁止自我引用文章。於functions.php加插以下內容:

1
2
3
4
5
6
7
function no_self_ping( &$links ) {
    $home = get_option( 'home' );
    foreach ( $links as $l => $link )
        if ( 0 === strpos( $link, $home ) )
            unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );

以及,在設定 → 討論一處也可以禁用這個功能。

1.3. 主題功能

在Wordpress,預設有幾種主題功能,不過也有一些是被隱藏了的。如果想啟動它們的話就要在functions.php加插以下代碼。

運用縮略圖

於編輯版面加插縮點圖。

add_theme_support( 'post-thumbnails' );

如果想輸出至index.php或其它地方的話,就要像以下的這般寫:

<?php the_post_thumbnail(); ?>

運用文章摘要

在固定頁面預設不能使用文章摘要,可是還是有辦法開啟這個功能。

add_post_type_support( 'page', 'excerpt' );

於index.php等等地方輸出:

<?php the_excerpt(); ?>

自訂導航列


這是Wordpress3.1版本時推出的新功能,如有需要啟用請於functions.php加插:

add_theme_support( 'menus' );

如果想在header.php或其他部份輸出導航欄:

<?php wp_nav_menu(); ?>

2. 摘錄表示、the_excerpt 關連

在Wordpress的編輯文章畫面裡,按一下more按鈕就會在文章插入。這樣的話在首頁或其他地方就不會顯示全文而會在中間顯示「繼續閱讀全文」。不過我經常都會忘記了這個步驟,所以我會在首頁文章等等的地方使用the_excerpt、文章摘要。

2.1. 讓the_excerpt中的[...]字樣變成其他字

當你在文章摘要打了字之後,文末會帶有[...]字樣。如果不喜歡的話,可以加以刪除。在functions.php加插以下代碼:

functions.php

1
2
3
4
function new_excerpt_more($more) {
      return '';
}
add_filter('excerpt_more', 'new_excerpt_more');

第二行的return "; 中間打’…’的話,文末就會變成「…」而不是[...]了。

2.2. 在文章摘要末端加上繼續閱讀全文連結


想加入the_excerpt函數中「繼續閱讀」的連結,請加插以下代碼到functions.php。其實說白了這只是剛才介紹的代碼的改良版而已。

functions.php

1
2
3
4
function new_excerpt_more($more) {
     return ' ... <a class="more" href="'. get_permalink() . '">繼續閱讀全文</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

2.3. 限制摘要的文字數量

有時候也會想改改摘要文字的數量,其實在WordPress Codex裡就有介紹如何變更the_excerpt輸出的文字數量。

1
2
3
4
function new_excerpt_length($length) {
return 20; /* 文字數量 */
}
add_filter('excerpt_length', 'new_excerpt_length');

不過使用Wordpress日本版時,系統包裡定必會有一個叫WP Multibyte Patch的插件是吧?可是因為它限制著摘要數目維持在110字之內,所以上面的代碼就沒效果了……

於是只需加插以下的代碼,就可以隨心的選你喜歡輸出的文字數量。利用mb_substr函數,把文字截斷就行了吧。

<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

原來如此--這樣就能選擇喜歡的字數呢!試著上面的提示折騰了一段代碼出來了:

1
2
3
4
5
6
7
/* 文字摘要替代版 */
function my_excerpt( $length ) {
     global $post;
     $content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
     $content = $content . "...";
     return $content;
}

想要在博客輸出文章摘要,只需照以下寫的指定(數字)就可以了。像下面寫的就會限制至40字!

<?php echo my_excerpt(40; ?>

3. 限制要顯示的標題文字數量

從哪一方面來說,我的博客文章標題其實也太長了吧XD 在單一記事頁面(single.php)裡,固然是可以完全顯示文章標題,不過在首頁之類的地方看的話,有可能會因為標題太長而導致版面崩潰這種囧事。
當然利用css是可以有一定程度的限制,不過如果在標題過長的時候,省略它也許會是個好辦法。

functions.php

1
2
3
4
5
6
7
function titlelimitchar($title){
  if(mb_strlen($title) > 20 && !(is_single()) && !(is_page())){
    $title = mb_substr($title,0,20) . "...";
  }
  return $title;
}
add_filter( 'the_title', 'titlelimitchar' );

在上面的例子可以看到,利用mb_substr($title,0,20)能把字數限制至20字。不過有時候標題裡會夾雜全形和半形,那時文字數量也會隨著同一個長度變更,這點要注意喔!

(其實看真一點第二、三大點跟winy寫的那個原理差不多,不過他那個更是三合一的,也可以去掉html碼保持整潔。詳細:分享一段wordpress自动截断代码

4. 把特定的文字轉換成連結

在寫博文時,如果有經常插入的連結(例如是自己的twitter頁面的連結),每次都要逐個字輸入實在很麻煩。所以如果能把特定的文字自動換成指定的連結那就方便多了!我比較懶惰,就把以下的代碼寫進functions.php裡。

1
2
3
4
5
6
7
8
9
10
11
/* 替換文字成連結 */
function replace_text_wps($text){
  $replace = array(
    '@twitter' => '<a href="http://twitter.com/WebDesignRecipe" target="_blank" class="twitter-link">@WebDesignRecipe</a>',
    '@facebook' => '<a href="http://www.facebook.com/nori.takahashi" target="_blank" class="facebook-link">facebook 個人資料</a>',
    '@g-plus' => '<a href="https://plus.google.com/116578177130489958038/about" target="_blank" class="g-plus-link">Google+ 個人資料</a>',
  );
  $text = str_replace(array_keys($replace), $replace, $text);
  return $text;
}
add_filter('the_content', 'replace_text_wps');

在上例中,在文章中鍵入 @twitter 的話,就會輸出成 @WebDesignRecipe 就是會把@WebDesignRecipe加上連結這樣。

(這個功能)只是單純的把文字自動換成連結,即使不是換成連結也可以,腦子裡有各種想法的話都可以用它來達成!

同時,如果想省略代碼使其更有效率,在Wordpress有一預設功能很方便:短代碼!有關短代碼的介紹,請看22個Wordpress客製化設定

5. 在側欄的分類列表中加上圖標

分類列表通常都會在側欄中表示。如果想在側欄中輸出分類列表,通常都會用到主題函數:wp_list_categories

不過如果大家想在旁邊加上圖標的時候,大家又會怎樣折騰呢?利用wp_list_categories輸出的html碼就一定會是這樣:

1
2
<li class="cat-item cat-item-1"><a href="#">Photo</a></li>
<li class="cat-item cat-item-2"><a href="#">Design</a></li>

利用 cat-item-1cat-item-2,的確能在CSS個別設定背景圖片。不過這樣設定有點煩人……。當在本地環境(注:例如XAMPP)製作主題時,由於主機分派的ID會應用在首頁、導航列、側欄各項目之類的地方,所以兩方的 cat-item-X(分類ID)未必會相同。有時候設定了 cat-item-1 顯示圖標A,可能最終會顯示圖標B。

如果可以話讓分類中的數字代碼變成英文代碼(像是 cat-photo 、又或者是cat-design),就一定會更好。
所以想在旁邊加插圖標的話,就應該用 get_categories 而不是 wp_list_categories 。

sidebar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
<?php
$args=array(
  'orderby' => 'name',
  'order' => 'ASC'
  );
$categories=get_categories($args);
foreach($categories as $category) {
  echo '<li class="cat-'. $category-> slug .'">';
  echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
  echo '</li>';
}
?>
</ul>

這樣的話,就能把 cat-photo 、cat-design 之類的class屬性名稱替換成英文代碼了!不過一定要用英數字命名。不過究竟為什麼 wp_list_categories 不能替換class中的分類名稱呢…

輸出的HTML碼

1
2
<li class="cat-photo"><a href="#">Photo</a></li>
<li class="cat-design"><a href="#">Design</a></li>

(注:本應原作者是參考自日本語版的wordpress codex,不過為了方便童鞋閱覽所以以上的連結換成本家英文版。)

追加

Simple Colors 童鞋成功折騰出在 wp_list_categories 也能把class中的分類名稱換成英文的代碼了!真的幫了我很多!感謝你啊!

詳情請看下面Simple Colors的教學喔!
在wp_list_categories把class中的分類名稱換成英文

6. 顯示favicon

雖然是可以直接寫進header.php裡,不過今次介紹的是先寫進functions.php然後鉤進(hook)header.php裡。「鉤」是什麼?有這樣疑惑的人請看看22のWordPressカスタマイズハック這篇舊文吧!

functions.php

1
2
3
4
function blog_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />'."\n";
}
add_action('wp_head', 'blog_favicon');

7. 在搜尋結果中消除特定頁面

有時並不想在搜尋頁面被搜到特定的文章。那樣只需加插以下代碼到functions.php就OK了。

functions.php

1
2
3
4
5
6
7
function fb_search_filter($query) {
  if ( !$query -> is_admin && $query -> is_search) {
    $query -> set('post__not_in', array(28, 35) );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'fb_search_filter' );

在 ‘post__not_in, array( 28, 35 ) 裡 ,指定那些不想被搜到的文章的ID就可以了。當然你可以增加其數量!

8. 想把自訂欄位用在文章循環外

自訂欄位,在Wordpress中其中一個很方便的功能。基本上,在自訂欄位裡輸入了的值可以在文章循環中取得。這東西是長這樣的:

文章循環的樣子

1
2
3
4
5
6
7
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
 
/*這就是循環*/
 
<?php endwhile; ?>
<?php endif; ?>

在index.php或single.php中應該會很常見。
不過自訂欄位並沒有可以用在循環外的機制,所以有時也想在循環外用這個東西。那個時候,就請在想用的地方加插以下代碼到functions.php:

1
2
3
4
5
6
<?php
global $wp_query;
$postid = $wp_query -> post -> ID;
echo get_post_meta($postid, 'custom-field-name', true);
wp_reset_query();
?>

9. 增加縮圖至RSS feed中的摘要發布

在Wordpress的RSS/Atom feed發布頁面,可以選擇全文顯示摘要顯示。這個博客"Web Design Recipes"正在使用摘要發布feed。

不過摘要發布時不能顯示文章縮點圖,這個有點遺憾…於是在functions.php加插了以下代碼。

1
2
3
4
5
6
<?php
global $wp_query;
$postid = $wp_query -> post -> ID;
echo get_post_meta($postid, 'custom-field-name', true);
wp_reset_query();
?>

這樣做的話,當你的文章有設定縮略圖時,RSS feed中的發布也會一併顯示。

10. 也為管理介面添加favicon

剛才介紹了改變博客favicon的方法,今回也想讓管理介面有所變更。不過不是同一款favicon喔!這樣可能會更易看懂吧!

function.php

1
2
3
4
function admin_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/admin-favicon.icon" />';
}
add_action('admin_head', 'admin_favicon');

11. 改變HTML編輯器的字型

隨著Worpress 3.2版更新,HTML編輯器也有所變更了是吧?在我看來這個看得有點辛苦了,於是試著改了字型。
折騰方法很簡單,加插以下代碼到function.php。font-family或字體顏色就任君選擇囉!

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function change_editor_font(){
echo "<style type='text/css'>
#editorcontainer textarea#content {
  font-family: \"ヒラギノ角ゴ Pro W4\",
    \"Hiragino Kaku Gothic Pro\",
    \"Century Gothic"\,
    \"微軟正黑體"\,
    Helvetica,
    sans-serif;
  font-size:14px;
  color:#333;
}
</style>";
}
add_action("admin_print_styles", "change_editor_font");

追加
當升級成Wordpress 3.3版時,ID好像改了。照下面的改了它就OK了!

#wp-content-wrap textarea#content.wp-editor-area {

12. 讓文章能加插獨立CSS

不管是文章或是頁面,有時也想為它們加添獨立的CSS。根據這點,在這兒給出兩個小提示。其一是在外部呼叫CSS,其二是加入style屬性然後輸出至head標籤內。

12.1. 外部呼叫CSS

首先要製作好CSS,然後上傳至主機的方法。寫完獨立CSS後,要把該文章ID加插在檔案名後面。例如style-100.css(style-ID.css)。接著,在functions.php加插以下代碼:

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
function article_id_style() {
  global $post;
  if (is_single()) {
    $currentID = $post->ID;
    $serverfilepath = TEMPLATEPATH.'/css/style-'.$currentID.'.css';     $publicfilepath = get_bloginfo('template_url');
    $publicfilepath .= '/css/style-'.$currentID.'.css';
    if (file_exists($serverfilepath)) {
      echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />\n";
    }
  }
}
add_action('wp_head', 'article_id_style');

當主題中的css文件夾有這個檔案時,就會自動貼上外部CSS的連結然後運行它。
是說在我知道這些小知識之前,自己還一直在header.php寫條件判斷w 只要使用文章ID就可以了啊w 原來如此!

12.2. 在管理頁面「唰」聲地更新

CSS篇幅夠長的話用上面的方法是挺不錯,但如果只寫了兩、三行的話就要另開CSS的話也就未免太小題大做了。特地又要去主機上傳檔案也很麻煩。以前用過自訂欄位,讓我察覺到下面的代碼了!把它寫進functions.php。

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
  add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
  add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
  global $post;
  echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
  echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
  if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_css = $_POST['custom_css'];
  update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
  if (is_page() || is_single()) {
    if (have_posts()) : while (have_posts()) : the_post();
      echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
      endwhile; endif;
      rewind_posts();
  }
}

出現了獨立CSS專用box! 在這兒鍵入CSS,就會輸出在head裡面的style屬性了。

via:Custom CSS Per Post

13. 面對客戶?的自訂方法

這自設定未必真正需要在個人博客中使用,不過如果這是要給客戶的成品的話,可能需要折騰一下了……其實就是要自訂很多東西。

13.1 管理畫面的logo

如果這是需要交給客戶的話,管理畫面的logo有可能需要改一下。添加以下代碼至functions.php,覆蓋原有的CSS吧。

functions.php

1
2
3
4
5
6
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
</style>';
}
add_action('admin_head', 'my_custom_logo');

WordPress 3.2版開始,logo的變得小了點。大小是16px x 16px。把 custom-logo.gif 上傳至主題目錄的 images 文件夾就行了。

13.2 底部的文字

配合logo,底部的文字(注:「感謝您使用 WordPress……」那處)也是需要變更的。添加以下代碼至functions.php。

functions.php

1
2
3
4
function remove_footer_admin () {
  echo '如需查詢請到<a href="http://webdesignrecipes.com/contact/" target="_blank">Web Design Recipes</a>。';
}
add_filter('admin_footer_text', 'remove_footer_admin');

要把顯示的文字(echo以下)改掉喔!

13.3 刪除管理列

由Wordpress 3.1版開始登場的管理列。如果沒需要的話也刪除它好了。在管理頁面 → 帳號 → 個人資訊 → 顯示管理列中剔除它就可以關閉這個功能。不過每位客戶都這樣折騰不會太麻煩嗎?如果使用者多了起來時也會更糟糕。添加以下代碼至functions.php就可以簡單刪除它。

functions.php

1
2
3
4
function disable_admin_bar(){
  return false;
}
add_filter( 'show_admin_bar' , 'disable_admin_bar');

return false…好像可以寫得更簡單吧。下面一行就能秒殺了。

add_filter('show_admin_bar','__return_false');

以後就記住這個寫法吧w

不過這樣的話,剛才帳戶 → 個人資訊 → 顯示管理列的部份還是會設定顯示它。如果想這部份也一併消除掉的話,在understandard童鞋的博客也有介紹:

13.4 登入畫面logo

在Wordpress的登入頁面,有著大大的logo。也許這個變成客戶的logo會比較好。如果手中已有素材的話,在functions.php添加以下代碼。

functions.php

1
2
3
4
5
function my_custom_login_logo() {
  echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }     </style>';
}
 add_action('login_head', 'my_custom_login_logo');

圖片大小(h1 a 標籤的大小)是 326px x 82px (WordPress 3.2)!

13.5 全體改變登入畫面

「不光是登入logo,想把背景、連結顏色等等的都改掉!」的時候,在functions.php添加以下代碼,讀取外部CSS檔案就可以了。

functions.php

1
2
3
4
function custom_login() {
  echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/login.css" />';
}
add_action('login_head', 'custom_login');

配合login.css的位置,改變其路徑!

13.6 從個人資料中刪除不要的項目

管理頁面 → 帳號 → 個人資訊中看了看,真的有好多項目呢。AIM、Yahoo IM、Jabber / Google Talk之類的…這些都可以刪除的。其實這些是神馬來的?即使客戶這樣問了解釋給他聽也會不明白的w 所以在functions.php添加以下代碼,刪除它們吧。

functions.php

1
2
3
4
5
6
7
function hide_profile_fields( $contactmethods ) {
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);
  return $contactmethods;
}
add_filter('user_contactmethods','hide_profile_fields');

13.7 相反的替個人資料增加項目

相反地,今回試著增加項目。

functions.php

1
2
3
4
5
6
7
8
9
10
function my_new_contactmethods( $contactmethods ) {
/* twitter */
$contactmethods['twitter'] = 'Twitter';
/* facebook */
$contactmethods['facebook'] = 'Facebook';
/* Google+ */
$contactmethods['g_plus'] = 'Google+';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

(注:目前 WordPress 已內建 twitter 和 facebook 這兩個項目,故只需打上 google+ 那項就好)
有一點要注意的是,$contactmethods['g_plus'] 中,g_plus的部分。由於這個將會成為資料庫的欄位部分所以有些字形是不能用的。不過用英數字命名倒沒問題。

13.8 顯示個人資料

今回試著展示一下個人資料。在多個作者共筆的博客裡,文章下方一定會顯示著者的簡歷和頭像吧!現在就是試著折騰那個。

(注:此乃ai產物…技術不是一般的爛orz)

sidebar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h2>About Author</h2>
<a href="<?php the_author_meta('user_url'); ?>"> /* 網站 */
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
</a>
<h3>Written by <?php the_author_link(); ?></h3> /* 網名 */
<p>
<?php the_author_meta('description'); ?> /* 自我介紹 */
我還有撰寫<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">其他</a>文章喔! /* 作者的文章一覽連結 */
</p>
<ul>
<li><a href="http://twitter.com/<?php the_author_meta('twitter'); ?>" target="_blank">Twitter</a></li> /* Twitter */
<li><a href="http://www.facebook.com/<?php the_author_meta('facebook'); ?>" target="_blank">Facebook</a></li> /* Facebook */
<li><a href="https://plus.google.com/<?php the_author_meta('g_plus'); ?>/about" target="_blank">Google+</a></li> /* Google+ */
</ul>

個人簡歷可以用 the_author_meta 提取!不過條件是只限於在文章循環內使用。由上面的例子可以看到也有用 get_avatar 之類的函數提取頭像。

  • get_avatar( get_the_author_meta('user_email'), '80', '' )
    從Gravatar提取頭像,80 是指 80px x 80px 的意思。
  • the_author_meta('user_url')
    輸出個人資料中網址欄位的數值。
  • the_author_meta('description')
    輸出個人資料欄位(自我介紹之類的)的數值。
  • the_author_meta('twitter')
    剛才折騰完的 twitter 值… facebook 及 g_plus 也是同樣做法。
  • the_author_link()
    你在該博客的顯示名稱。如果你有在網址欄位打上自己的網址,就會自動給出連結。
  • get_author_posts_url( get_the_author_meta( 'ID' ) )
    如果按下了這個連結,就可以看回同一作者寫過的文章(author.php、index.php…)頁面。

13.9 除了管理員以外不表示升級通知

當Wordpress有更新時,在管理頁面的最頂部會有一條黃色的通知欄是吧!的確是個很方便的功能,不過可能客戶會不想顯示它,請叫管理員幫你升級!…會看成這樣吧w

在客戶的角度看,即使我是管理員,客戶也是作者。所以要讓升級通知顯示給管理員的同時,也要設置權限禁止作者或以下階級顯示通知。

functions.php

1
2
3
4
5
6
if (!current_user_can('edit_users')) {
  function wphidenag() {
    remove_action( 'admin_notices', 'update_nag');
  }
  add_action('admin_menu','wphidenag');
}

if (current_user_can(‘edit_users’)) 是指擁有帳戶編輯(edit_user)權限的意思。在上面的代碼,最頂的一行帶著 ! 的意思就是沒有帳戶編輯權限的意思喔!

13.10. 針對非管理員使用者,不表示一些不常用到的項目

剛才關閉顯示的對象是升級通知,今次是針對管理畫面中的目錄。媒體、工具、安裝了Contact Form 7(是一個郵箱插件)之後就會在目錄新增一個聯絡表單的項目。明明客戶沒需要用到但肯定會被問「這個又是神馬?」,光是聽了就有不想被你玩弄的感覺啊。

這個也設定成管理員以外不給看好了。

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (!current_user_can('edit_users')) {
  function remove_menus () {
    global $menu;
    $restricted = array(
      __('媒體'),
      __('工具'),
      __('聯絡表單')
    );
    end ($menu);
    while (prev($menu)){
      $value = explode(' ',$menu[key($menu)][0]);
      if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
        unset($menu[key($menu)]);
      }
    }
  }
  add_action('admin_menu', 'remove_menus');
}

上面的例子會取消顯示媒體、工具和聯絡表單這三個項目。

13.11. 指定某些使用者的管理畫面不會顯示某些項目

今次不是要設權限,而是特定對某些使用者不會顯示項目。例如是多位管理員時,應該不想被他人碰固定分頁之類的地方的。這時候就要用下面給出的方法。

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function remove_menus () {
  global $menu;
  global $current_user;
  get_currentuserinfo();
  if($current_user -> user_login == 'Nori') {
    $restricted = array(
      __('媒體'),
      __('連結')
    );
    end ($menu);
    while (prev($menu)){
      $value = explode(' ',$menu[key($menu)][0]);
      if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
        unset($menu[key($menu)]);
      }
    }
  }
}
add_action('admin_menu', 'remove_menus');

if($current_user -> user_login == ‘Nori’) 中的 ‘Nori’ 是該使用者的ID。這樣的話,用戶ID Nori 桑就不會在管理畫面見到媒體和連結這兩個項目了。

13.12. 消除文章發布畫面中不想要的自訂區塊 (meta box)

在Wordpress中的文章發布畫面,真的很多自訂區塊呢。

如果不想要這些東西的話,選擇不顯示它們也許不會讓客戶感到眼花。因為誰都想要一個簡單、易到的操作介面嘛!
於functions.php刪除不想顯示的區塊。

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (!current_user_can('edit_users')) {
  function remove_extra_meta_boxes() {
    remove_meta_box( 'postcustom' , 'post' , 'normal' ); /* 編輯文章:自訂欄位 */
    remove_meta_box( 'postcustom' , 'page' , 'normal' ); /* 固定分頁:自訂欄位 */
    remove_meta_box( 'postexcerpt' , 'post' , 'normal' ); /* 編輯文章:文章摘要 */
    remove_meta_box( 'postexcerpt' , 'page' , 'normal' ); /* 固定分頁:文章摘要 */
    remove_meta_box( 'commentsdiv' , 'post' , 'normal' ); /* 編輯文章:迴響 */
    remove_meta_box( 'commentsdiv' , 'page' , 'normal' ); /* 固定分頁:迴響 */
    remove_meta_box( 'tagsdiv-post_tag' , 'post' , 'side' ); /* 編輯文章:標籤 */
    remove_meta_box( 'tagsdiv-post_tag' , 'page' , 'side' ); /* 固定分頁:標籤 */
    remove_meta_box( 'trackbacksdiv' , 'post' , 'normal' ); /* 編輯文章:傳送引用 */
    remove_meta_box( 'trackbacksdiv' , 'page' , 'normal' ); /* 固定分頁:傳送引用 */
    remove_meta_box( 'commentstatusdiv' , 'post' , 'normal' ); /* 編輯文章:討論 */
    remove_meta_box( 'commentstatusdiv' , 'page' , 'normal' ); /* 固定分頁:討論 */
    remove_meta_box( 'slugdiv','post','normal'); /* 編輯文章:代稱 */
    remove_meta_box( 'slugdiv','page','normal'); /* 固定分頁:代稱 */
    remove_meta_box( 'authordiv','post','normal' ); /* 編輯文章:作者 */
    remove_meta_box( 'authordiv','page','normal' ); /* 固定分頁:作者 */
    remove_meta_box( 'revisionsdiv','post','normal' ); /* 編輯文章:文章版本 */
    remove_meta_box( 'revisionsdiv','page','normal' ); /* 固定分頁:文章版本 */
    remove_meta_box( 'pageparentdiv','page','side'); /* 固定分頁:分頁屬性 */
  }
  add_action( 'admin_menu' , 'remove_extra_meta_boxes' );
}

雖然不算是一篇很有脈絡文章且各式各樣的代碼非常多,但我還是把自己經常用到的自訂代碼整理了一次。感謝參考資料中列出的網頁以及博客 ;D

由 小闇 發表

超級深夜黨,上課時熱愛睡覺,成績從沒優良過。經常被功課折騰至胃痛。是位關注互聯網.網頁前端的不良學生。

Comments: 20

  1. 好长一篇技术文 :eek:
    果断收藏一下

    回覆 回覆
  2. 高手真多啊,这么牛叉

    回覆 回覆
  3. 好厉害!把主题定制的很多功能都写了。

    回覆 回覆
  4. wp的函数接口那么多啊,一般人还真不知道。

    回覆 回覆
  5. 好厉害。。
    学习之余YM一下

    回覆 回覆
  6. 高手,技术太牛了。。。

    回覆 回覆
  7. 这个可以有啊~~比较全,虽然有好多已经看过。 :lol:

    回覆 回覆

Leave a Reply