首页    >    中文手册    >   WordPress布局和设计FAQ

WordPress布局和设计FAQ

ven 星期四,2009/10/15 03:53

布局和样式

遇到CSS设计问题时怎么办？

下面这些资料可以帮我们解决很多CSS难题：

怎样为自己的评论选择不同的样式或颜色？

WordPress中有大量插件能够更改管理员评论和评论框的外观、样式以及颜色。可以在WordPress官方插件目录中查找各种不同的评论插件。

怎样更改弹出式评论窗口的大小？

要在WordPress 1.5中更改弹出式评论窗口的大小，可以修改comment-functions.php文件中function comments_popup_script($width=400, $height=400, $file=) {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定制样式列表

怎样让分类按照自己希望的顺序显示？

生成分类列表时涉及两个模板标签，具体信息请见list_cats() （已停止使用）与 wp_list_cats() （已停止使用）。

怎样使链接在新窗口中打开？

由于滥用程度过高，在如今的互联网中，在新窗口中打开链接已经被看成是一种不好的链接打开方式。尽管如此，在一些一次性需要打开多个窗口的演示型网站中，链接仍然会在新窗口中打开。在文章正文部分中输入的链接可在新窗口中打开。

用“链接”的快速标签按钮输入链接地址后，为需要在新窗口中打开的链接添加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插件和其它工具。

怎样在文章中制造首字下沉效果？

首字下沉，即一篇文章第一段的第一个字比该行其它文字下沉一定距离，且字号也比该行其它文字稍大。

可利用BBCode快速标签实现首字下沉的效果。首先在样式表中添加以下内容：

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

再在/wp-includes/js/quicktags.js的edButtons中加入以下代码：

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

这样一个首字下沉快速标签就会出现在编辑窗口中了。

参见drop caps support question

哪里有更多关于CSS的信息？

参见CSS

文本内容的显示效果

怎样在博客主页上只显示文章标题而不显示文章正文部分？

要在主页上只显示文章标题，可将index.php文件中的：

<?php the_content(); ?>

替换成：

<?php
if (is_single()) {
the_content();
}
else {//no content, nothing.
}
?>

这样文章内容就只会显示在单篇文章页面而不显示在主页上了。注意：如果主题使用single.php等其它模板来显示单篇文章，那么以上改动不会影响单篇文章页面。

参见：

怎样在博客主页上显示文章的摘要内容或节点摘要？

节点摘要（teaser）与摘要（excerpt）有所不同。节点摘要指的是文章开始部分的几段话或一个段落。如果文章篇幅较长，可以在开始部分的几个句子后插入一个<!–more–>快速标签，这里<!–more–>就是节点摘要的分割点。我们在主页、分类页面或存档页面上浏览文章时，页面上显示的是文章的节点摘要，摘要后面带有一个超链接（链接文本类似于点击这里查看全文）。点击链接后就能查看到文章的完整内容。

注意：有些主题不支持more链接功能。可以在-the_content()和设计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 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为上传图片的缩略图生成链接？

默认情况下上传一幅图片后，WordPress只能生成少量代码。如果希望WordPress能够自动生成缩略图的链接，可参考以下资料，其中包括一个hack修改，但该修改可能不适用于WordPress 1.5。

参见：

怎样为列表项目符号使用自定义图像？

参见：

怎样旋转/随机排列博客标题栏上的图片？

参见设计标题栏

怎样链接到网站内部的图片？

可以使用绝对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>

在哪里能找到更多关于图片、图片博客和图片库的信息？

参见：

模板标签

怎样将日志的时间标记从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>

怎样以字母顺序排列分类目录？

有时需要通过修改index.php来达到这种效果。

在index.php中找到以下内容：

<?php list_cats(0, 'All', 'name'); ?>

替换为：

<?php list_cats(0,'','name','','',true,0,1,1,1); ?>

参见：

怎样以下拉列表形式显示分类目录？

有时需要通过修改index.php来达到这种效果。

在index.php中找到以下内容：

<?php list_cats(0, 'All', 'name'); ?>

替换为：

<form action="<?php echo $PHP_SELF ?>" method="get">
<?php dropdown_cats(); ?>
<input type="submit" name="submit" value="view" />
</form>

参见：Template_Tags/dropdown_cats （已停止使用）

怎样使分类目录中一个或多个分类不显示在分类目录列表中？

用以下函数列出除分类1外的所有分类：

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

当然，我们需要把这里的1替换成我们不需要的分类的ID。

要除去多个分类，可使用：

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

把1和2替换成不希望显示的分类的ID。如果不希望显示更多分类，可逐个列出这些分类的ID并用逗号隔开。

参见：

怎样隐藏博客主页上某一分类目录下的日志？

要隐藏（删除）博客主页上某一分类目录下的日志，可以将删除日志所用代码插入主题的index.php文件的主循环中。

主循环的开始部分类似于：

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

如果要删除主页上ID为4分类下某篇日志，只要在主循环中加入以下条件：

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

主循环的结尾部分类似于：

<?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的分类下的这篇日志时，就看不出日志属于分类4了。而在主页外的其它页面上，分类4下的日志仍然会全部显示出来。

参见：

怎样以下拉列表形式显示存档页面？

在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 »'); ?>

注意：使用其它主题时，被删除的代码会有一定程度上差异。

参见：

模板

为什么我只能在博客上看到几篇日志，其它的都到哪儿去了？

在管理面板>设置>阅读选项中的博客页面最多显示__篇文章的空白位置上，填写符合自己需要的数字。

如果不能查看所有日志后修改了index.php文件，一定要确保打开的标签和闭合的标签个数相等，并且标签都在相应的位置上。

怎样创建一个页面上所有日志都能被不同方式分类的存档页面？

参见：

WordPress中的__()函数和__e()函数的作用是什么？

用最简单的话来说，这两个函数负责“输出”用户的命令。这两个函数是PHP术语echo的缩写，echo用以显示文本信息。在WordPress中，__()函数和__e()函数被用来识别php文件中被标示的、需要被翻译成其它语言或本地化的字符串。

这两个函数都接收字符串作为参数。例如：

_("Translate Me")
_e("Translate Me")

两个函数间的唯一功能性区别在于：__e()函数回应返回的字符串，而__()函数只是返回字符串。如果需要为函数提供字符串，可使用__()函数。而如果希望将字符串作为XHTML的一部分输出，则需要使用__e()函数。

有一个工具可以遍历所有php文件，抽取 __() 与__e()函数标示的所有字符串。

参见：

怎样用简单的方法在博客导航标题上同时显示页面链接和分类链接？

下面假设我们的导航栏用（或将要使用）模板标签wp_list_pages来显示页面链接。之后设法通过页面访问分类，以此达到在导航栏同时显示页面和分类链接的效果。

要在导航栏中同时显示页面链接和一个分类名称为新闻的链接，首先需要安装一个诸如Page Links To之类的插件，新建一个名为新闻的页面，然后在Page Links To模块的“指向该URL：”字段中，输入新闻分类的URL链接。注意：在博客中访问新闻分类页面，此时浏览器地址栏中的URL就是新闻分类的URL链接地址。

要以特别的顺序显示导航栏中的页面，可在编辑页面时使用属性模块中的顺序字段，为每个页面设置相应顺序，然后在wp_list_pages中使用'sort_column=menu_order'参数。

与Page Links To功能相似的插件还包括：

参见：

怎样在页面中显示日志？

有多种方式可以在一个页面中显示日志。最简单的是方法参见：怎样创建一个静态首页，让日志显示在一个名为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。

如何避免对主题的页脚信息进行编码？

有些主题作者在已编码的页脚中嵌套链接，使得用户无法辨别页脚的实际动态。注意：有时这种编码内容有时会是恶意的，有的甚至涉及版权问题！下面介绍一种修正页脚编码的方法。

在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(); ?>。

若主题许可证不允许以上操作，请勿操作。必要时可以考虑更换其他主题。

参见：

主题

怎样使用来自Alex King网站的主题样式？

参见：

设计网站初期需要修改哪些文件？

参见：

如何分辨各个文件的输出结果？

可以在不同文件的最上方和最下方输入：

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

之后HTML输出结果上会显示相应内容。

怎样为自己的主题创建一个screenshot.png文件？

参见：

分类：中文手册

* 版权声明：作者WordPress啦！ 转载请注明出处。

相关文章