Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

zh-tw:設計與佈局的常見問題

返回到疑難解答

Contents

佈局和樣式

遇到CSS設計問題時可以從哪裡獲得幫助?

下面這些資料可以幫我們解決很多CSS難題:

怎樣為自己的留言選擇不同的樣式或顏色?

WordPress中有大量外掛程式能夠更改管理員留言和留言框的外觀、樣式以及顏色。可以在WordPress官方外掛程式目錄中查找各種不同的留言外掛程式。

怎樣更改彈出式留言窗口的大小?

要在WordPress 1.5中更改彈出式留言視窗的大小,可以修改comment-functions.php文件中function comments_popup_script($width=400, $height=400, $file=) {的相應值。

要在WordPress 1.2.1中更改彈出式留言窗口的大小,可對template-functions-comment.php檔的第50行做如下修改:

function comments_popup_script($width=400, $height=400, 
$file='wp-comments-popup.php')

也可以在wp-comments-popup.php檔的第81行中修改使用者輸入留言的文本區域的大小。

還有哪些地方可以找到更多用於設計部落格的主題和範本?

哪裡有關於設計樣式表和巢狀表格的資料?

參見用CSS定制樣式清單

怎樣修改嵌套功能表連結的樣式?

參見用CSS定制樣式清單

怎樣防止連結旁出現專案符號?

參見用CSS定制樣式清單

如何創建橫向導航菜單?

參見創建橫向導航菜單

怎樣讓分類按照自己希望的順序顯示?

參見 wp_list_categories().

怎樣使連結在新視窗中打開?

由於濫用程度過高,在如今的網際網路中,在新視窗中打開連結已經被看成是一種不好的連結打開方式。儘管如此,在一些一次性需要打開多個視窗的演示型網站中,連結仍然會在新視窗中打開。在文章正文部分中輸入的連結可在新視窗中打開。

用“連結”的快速標籤按鈕輸入連結位址後,為需要在新視窗中打開的連結添加target="_blank"屬性。考慮到網路可訪問性標準,還可以添加一些暗示該連結會在新視窗中打開的文字。

<a href="http://example.com/page.php" 
title="Page Title - opens in new window" target="_blank">
Page Title (Opens in new window)</a>

我想在部落格上顯示代碼,有沒有一種可以對HTML實體和標籤進行編碼的工具?

在文章中插入代碼一文介紹了怎樣在文章中編寫程式碼和代碼示例。編碼工具將我們的HTML/XHTML代碼轉換成可以顯示在部落格上的形式,避免代碼被流覽器當作 HTML處理。

如果經常要在文章中使用代碼,也可以選擇具有編碼功能的WordPress外掛程式和其它工具。

還可以參見: Fun Character Entities

怎樣在文章中製造首字下沉效果?

首字下沉,即一篇文章第一段的第一個字比該行其它文字下沉一定距離,且字型大小也比該行其它文字稍大。

可利用BBCode快速標籤實現首字下沉的效果。首先在樣式表中添加以下內容:

 #fp:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 margin-right: 3px;
 }

再在/wp-includes/js/quicktags.jsedButtons中加入以下代碼:

 edButtons[edButtons.length] =
 new edButton('ed_capdrop'
 ,'CapDrop'
 ,'<p id="fp">'
 ,'</p>'
 ,'c'
 );

這樣一個首字下沉快速標籤就會出現在編輯視窗中了。

參見: drop caps support question

哪裡有更多關於CSS的資訊?

參見CSS

文本內容的顯示效果

怎樣在部落格主頁上只顯示文章標題而不顯示文章正文部分?

要在主頁上只顯示文章標題,可將wp-content/themes/default/index.php文件中的:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>

<?php the_content('Read the rest of this entry »'); ?>

替換成:

<?php
if (is_single()) {
the_content('Read the rest of this entry »');
}
else {//no content, nothing.
}
?>

這樣文章內容就只會顯示在單篇文章頁面而不顯示在主頁上了。注意:如果主題使用single.php等其它範本來顯示單篇文章,那麼以上改動不會影響單篇文章頁面。

參見:

怎樣在部落格主頁上顯示文章的摘要內容或節點摘要?

節點摘要(teaser)與摘要(excerpt)有所不同。節點摘要指的是文章開始部分的幾段話或一個段落。如果文章篇幅較長,可以在開始部分的幾個句子後插入一個<!--more-->快速標籤,這裡就是節點摘要的分割點。我們在主頁、分類頁面或存檔頁面上流覽文章時,頁面上顯示的是文章的節點摘要,摘要後面帶有一個超連結(連結文本類似於點擊這裡查看全文)。點選連結後就能查看到文章的完整內容。

注意:有些主題不支援more連結功能。可以在the_content()和設計Customizing the Read More樣式中瞭解更多設計more連結的資訊。

重複上面提到的內容,節點摘要與摘要是不同的。摘要欄位需要使用者在編輯文章時自行填寫。可以用範本標籤,the_excerpt()來顯示文章的摘要欄位。

通常在編輯日誌時填寫的摘要不會顯示在部落格上,除非當前主題中使用了the_excerpt()範本標籤。如果在管理面板>設置>閱讀的Feed 中,每篇文章顯示選項下選擇“摘要”,這樣文章摘要就會顯示在訂閱者的feed訂閱中。

怎樣顯示文章總結而不是文章全文內容?

有兩種方法可以在部落格主頁上顯示文章總結而非全文:

  1. 在文章中插入快速標籤<!--more-->,之後在部落格主頁上顯示的文章內容就是<!--more-->之前的內容,內容後附有“繼續閱讀...”連結字樣,讀者可以點選連結查看文章完整內容。自訂Read More樣式中介紹了更改more連結字樣(如繼續閱讀)的方法。
  2. 修改主題的index.php範本檔,使之使用範本標籤the_excerpt()而非the_content()

參見:

如何定制部落格上“閱讀更多...”的連結文本?

參見自訂Read More樣式

怎樣利用部落格連結評級功能顯示連結等級?

在WordPress 1.5及之後的版本中,可以在連結管理器中為連結設定不同的等級並讓讀者看到這些連結的等級。

在“編輯連結”介面中,選定需要設置等級的連結並編輯。從下拉式功能表0到10之間選擇一個數位來評定連結等級。

但要顯示連結等級還需要對主題進行編輯。更多相關資訊請見wp_list_bookmarks()get_links()

WordPress 1.2之前的版本,做法稍微有點不同。你必須通過Links -> Link Categories -> Show -> Rating來開啟部落格連結評級功能。

圖片和圖形

怎樣為網站添加圖示?

在WordPress 2.0中為網站添加圖示時,在主題資料夾中(如wp-content/themes/default/)添加自己的favicon.ico檔,然後將以下代碼添加到header.php文件:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

請確保將以上代碼放在<head></head>區域中。

添加圖示詳細操作請參考為自己的WordPress部落格創建一個Favicon

我想給自己的網站添加一些按鈕,該到哪兒去找?

網站上的按鈕就像徽章一樣,向訪問者透露出網站主人對某項事物的愛好,或顯示出網站主人的文化、社會、政治或技術層面的相關資訊。

可以在網站上加上WordPress按鈕,表示對WordPress社區的支持:

更多網站按鈕請看:

怎樣讓WordPress為上傳圖片的縮略圖生成連結?

參見:

怎樣為清單專案符號使用自訂圖像?

參見:

怎樣旋轉/隨機排列部落格標題列上的圖片?

參見:

怎樣連結到網站內部的圖片?

可以使用絕對URI/URLs位址或相對URI/URLs地址。

使用相對URI位址,需要在根目錄中存放圖片的資料夾名稱前添加一個左斜線:

<img src="/images/balloons/image.jpg" alt="balloons" />

而絕對URI地址的用法則是:

<img src="http://www.example.com/images/balloons/image.jpg" alt="balloons" />

怎樣在分類頁面和存檔頁面中顯示圖片?

使用WordPress預設主題時,我們會發現,流覽分類頁面和存檔頁面時圖片(以及連結)不會出現在頁面上。這是由預設主題在部落格相應頁面上顯示日誌內容的方式造成的。要改變這種顯示方式,我們需要編輯預設主題的Archive範本(archive.php)。可以在主題編輯器中進行線上編輯,也可以將預設主題的archive.php檔下載到任意文字編輯器中進行離線編輯。打開archive範本後,在其中找到以下內容:

<div class="entry">
    <?php the_excerpt() ?>
</div>

我們需要在這裡修改範本標籤the_excerpt(),該標籤可顯示日誌內容的摘要並過濾所有HTML標籤。如果希望顯示文章全文(以及HTML標籤),需要使用the_content()範本標籤:

<div class="entry">
   <?php the_content(); ?>
</div>

從2.9版本開始,你還可以使用the_post_thumbnail()範本標籤。

參見: The Ultimative Guide For the_post_thumbnail In WordPress 2.9

在哪裡能找到更多關於圖片、圖片部落格和圖片庫的資訊?

參見:

範本標籤

怎樣將日誌的時間標記從AM/PM模式改為24小時制?

在部落格管理面板>設置>常規日期和時間中,設置默認時間格式

參見: 設置日期和時間格式

怎樣在每一篇日誌下都顯示日期/時間?

為了使網站上每個日誌標題下都能夠顯示日期和時間,我們需要修改多個範本檔。這些檔包括index.php, single.php, category.php,和archives.php

從這些範本檔中找出所有關於某一日誌標題的引用(不同主題中略有不同):

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>
<small>
<?php the_time('F jS, Y') ?> by <?php the_author() ?>
</small>

重新排列該引用,使時間資訊顯示在日誌標題之前(或之後):

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title(); ?>">
<?php the_time('F jS, Y') ?> - <?php the_title(); ?></a>
</h2>
<small>
by <?php the_author() ?>
</small>

參見: 設置日期和時間格式

怎樣修改標題連結中“永久連結到”的資訊?

根據網路可訪問性標準,連結的title屬性中應含有對該連結作用的說明。預設情況下,連結的title應該類似於下面這個示例。該示例用片語"Permanent Link to(永久連結到)"加上一個用來顯示日誌標題的範本標籤作為title屬性。

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>

要更改“Permanent Link to”字樣,只要刪除該字樣並替換為自己喜歡的文字就可以了:

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="Post about <?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>

也可以徹底刪除“Permanent Link to”,只留下title標籤:

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="<?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>

怎樣以字母順序排列分類目錄?

有時需要通過修改sidebar.php來達到這種效果。. 找到以下內容:

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

替換為:

<h2>Categories</h2>
<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
<input type="submit" name="submit" value="view" />
</form>

參見: Template_Tags/wp_dropdown_categories

如何阻止一個或多個分類在分類清單中顯示?

使用下面的函數可以顯示除了分類1以外的其他分類:

<?php wp_list_categories('exclude=1'); ?>

當然,你可以把1改為其他你想阻止顯示的分類ID。

阻止顯示多個分類,可以:

<?php wp_list_categories('exclude=1, 2'); ?>

把1和2改為你想阻止的其他分類ID。同樣的也可以增加更多的分類ID,用逗號隔開。

參見: Template Tags/wp_list_categories

如何隱藏特定分類的文章在首頁index.php中顯示?

如果你需要隱藏特定分類下的文章顯示在首頁,那你可以將下面的代碼放到範本index.phpThe Loop迴圈中。

The Loop的開始大體上是:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

例如要阻止分類4的文章在首頁的顯示,只要改成 :

<?php if ( !(in_category('4')) || !is_home() ) { ?>
<!-- Output the post here -->

The Loop的結束位置大致是:

<?php endwhile; ?>

在這之前,加上:

<?php } ?>

最後的結果看起來應該是:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ( !(in_category('4')) || !is_home() ) { ?>
<!-- Output the post here -->
<?php } ?>
<?php endwhile; ?>

這樣的話,分類ID為4的文章,都不會在首頁顯示。

參見: Exclude Posts From Some Category

怎樣以下拉清單形式顯示分類目錄?

將下面的代碼放到index.php中你希望顯示下拉清單的位置:

<li id="archives">Archives:
<ul>
<li><form name="archiveform" action="">
<select name="archive_chrono" onchange="window.location =
  (document.forms.archiveform.archive_chrono[document.forms.archiveform.archive_chrono.selectedIndex].value);">
<option value=''>By Month</option>
< ?php get_archives('','','option', 1); ?>
</></select>
</form>
</li>
</ul></li> 

如何避免在每篇日誌上出現“No Comments(無留言)”字樣?

當我們禁止網站上的留言功能後,可能會不希望在日誌上顯示“無留言(或留言被關閉)”字樣。

如果是在WordPress的Defaut主題中,可以刪除wp-content/themes/default/index.php中的以下代碼:

<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

注意:使用其它主題時,被刪除的代碼會有一定程度上差異。

參見: comments_popup_link()

範本

為什麼我只能在部落格上看到幾篇日誌,其它的都到哪兒去了?

管理面板>設置>閱讀選項中的部落格頁面最多顯示文章的空白位置上,填寫符合自己需要的數位。

如果不能查看所有日誌後修改了index.php文件,一定要確保打開的標籤和閉合的標籤個數相等,並且標籤都在相應的位置上。

怎樣創建一個頁面上所有日誌都能被不同方式分類的存檔頁面?

參見:

WordPress中的__()函數和__e()函數的作用是什麼?

用最簡單的話來說,這兩個函數負責"輸出"使用者的命令。這兩個函數是PHP術語echo的縮寫,echo用以顯示文本資訊。在WordPress 中,__()函數和__e()函數被用來識別php檔中被標示的、需要被翻譯成其它語言或當地語系化的字串。

  • __()
  • _e()

這兩個函數都接收字串作為參數。例如:

__("Translate Me")
_e("Translate Me")

兩個函數間的唯一功能性區別在於:__e()函數回應返回的字串,而__()函數只是返回字串。如果需要為函數提供字串,可使用__()函數。而如果希望將字串作為XHTML的一部分輸出,則需要使用__e()函數。

有一個工具可以遍歷所有php檔,抽取__()_e()函數標示的所有字串。

參見:I18n for WordPress Developers

怎樣用簡單的方法在部落格導航標題上同時顯示頁面連結和分類連結?

下面假設我們的巡覽列用(或將要使用)範本標籤wp_list_pages()來顯示頁面連結。之後設法通過頁面訪問分類,以此達到在巡覽列同時顯示頁面和分類連結的效果。

要在巡覽列中同時顯示頁面連結和一個分類名稱為新聞的連結,首先需要安裝一個諸如Page Links To之類的外掛程式,新建一個名為新聞的頁面,然後在Page Links To模組的指向該URL:欄位中,輸入新聞分類的URL連結。注意:在部落格中訪問新聞分類頁面,此時流覽器位址欄中的URL就是新聞分類的URL連結位址。

要以特別的順序顯示巡覽列中的頁面,可在編輯頁面時使用屬性模組中的順序欄位,為每個頁面設置相應順序,然後在wp_list_pages()中使用'sort_column=menu_order'參數。

你可以在http://wordpress.org/extend/plugins/search.php?q=Redirect "Redirect" plugins on the Plugins Directory]找到其他類似的外掛程式。

參見:管理外掛程式

怎樣在頁面中顯示日誌?

有多種方式可以在一個頁面中顯示日誌。最簡單的是方法參見:怎樣創建一個靜態首頁,讓日誌顯示在一個名為blog的頁面上?

還有一個相對複雜的方法:首先用查詢語句和一個WordPress 迴圈創建一個可檢索並顯示日誌的頁面範本,然後在部落格管理面板>頁面>添加新頁面中,添加一個帶有之前創建的頁面範本的新頁面。下面是一個示例,示例中所用主題為 WordPress主題Default:

  • 1. 新建一個檔並命名為wp-content/themes/default/pageofposts.php,檔中應包括以下內容:
<?php
/*
Template Name: PageOfPosts
*/

get_header(); ?>

	<div id="content" class="narrowcolumn">

<?php
$showposts = -1; // -1 shows all posts
$do_not_show_stickies = 1; // 0 to show stickies
   $args=array(
   'showposts' => $showposts,
   'caller_get_posts' => $do_not_show_stickies,
   );
$my_query = new WP_Query($args); 

?>

	<?php if( $my_query->have_posts() ) : ?>

		<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
			<?php
			//necessary to show the tags 
			global $wp_query;
			$wp_query->in_the_loop = true;
			?>
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry »'); ?>
				</div>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>

	<?php endif; ?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
  • 2. 在管理面板>頁面>添加新頁面中,新建一個頁面並命名,在範本欄位中選擇PageOfPosts
  • 3. 成功!然後在部落格上訪問該頁面,就可以看見頁面中的日誌了。

參見: 為什麼編輯頁面時沒有頁面範本選項?

怎樣刪除重複的、指向主頁的導航條?

如果主題上顯示了對頁面的導航,並且導航條中有多個指向主頁的導航,可以通過下面介紹的一些方法來刪除重複導航。當我們創建一個名為主頁的頁面後,重複導航的情況尤其容易發生。

很多主題開發者在主題的header.php檔中對主頁的引用進行“硬編碼”,並且用範本標籤wp_list_pages來顯示所有其他頁面。然而一旦我們創建一個名為主頁的頁面,就有可能引發重複導航問題。

要刪除重複導航,可編輯主題的header.php文件並:

  1. 查找被硬編碼的主頁引用並刪除
  2. 或者在wp_list_pages()中使用exclude=x參數,將其中的x替換為主頁頁面的頁面ID。

如何避免對主題的頁尾資訊進行編碼?

有些主題作者在已編碼的頁尾中嵌套連結,使得使用者無法辨別頁尾的實際動態。Note:有時這種編碼內容有時會是惡意的,有的甚至涉及版權問題!下面介紹一種修正頁尾編碼的方法。

在index.php檔中找到包含<?php get_footer(); ?>的代碼行。在該代碼行前後添加以下標識性文本:

<!-- Evil Footer Devil FOUND -->
<?php get_footer(); ?>
<!-- Evil Footer Devil BEGONE -->

之後訪問部落格,查看頁面原始程式碼(在Firefox流覽器中可點擊功能表列中的“查看”功能表,選擇“頁面原始程式碼”),複製兩個標識性文本之間的HTML代碼。重命名footer.php檔,用之前複製的HTML代碼新建一個footer.php檔,然後根據自己的需要修改新的footer.php文件。記住要在</body>標籤前插入 <?php wp_footer(); ?>

若主題許可證不允許以上操作,請勿操作。必要時可以考慮更換其他主題。

其他

上述內容應該是有用的,但是僅僅告訴你如何修改HTML而不是PHP代碼。如果要看PHP代碼,你可以用線上解碼來查看。

下面的位址允許你察看解碼後的代碼比如$o=whatever: http://ottodestruct.com/decoder.php

基於上面的介面,對於類似於$_F=__FILE__還可以使用: http://www.tareeinternet.com/scripts/byterun.php

對於eval(gzinflate(base64_decode('...')));可以用: http://www.tareeinternet.com/scripts/decrypt.php

在http://cyko.decodethe.net/和http://base64-encoder-online.waraxe.us/你還可以找到其他的。

參見:

主題

怎樣使用來自Alex King網站的主題樣式?

參見:

設計網站初期需要修改哪些檔?

參見:

如何分辨各個檔的輸出結果?

可以在不同檔的最上方和最下方輸入:

<!-- Begin <?php echo basename(__FILE__); ?> -->
<!-- End   <?php echo basename(__FILE__); ?> -->

之後HTML輸出結果上會顯示相應內容。

怎樣為自己的主題創建一個screenshot.png文件?

參見:

譯者信息

本文檔由ThemeDaily翻譯
譯者部落格:Free Wordpress Themes
E-Mail:admin@themedaily.com

返回到疑難解答