分类目录归档：Web-making（Wordpress）

Include all the information about web-making, solve problems and provide my experience.

WordPress下拉式菜单配置方法

发表回复

采用下拉式菜单既可以节省网页空间，简化页面布局，同时操作起来也比较方便和快捷，如果你恰好也厌倦了自己的旧模板，你可以参照下面的这个教程给自己的WordPress主题制作一个杂志型的下拉式菜单，非常简单，当然，你还可以自定义它的显示样式。

》》第一步：Html和Php代码

用下面的代码取代你在header.php中的导航菜单旧代码

<ul id=”nav” class=”clearfloat”>
<li><a href=”<?php echo get_option(’home’); ?>/” class=”on”>Home</a></li>
<?php wp_list_pages(’title_li=’); ?>
<li class=”cat-item”><a href=”#”>Categories</a>
<ul class=”children”>
<?php wp_list_categories(’orderby=name&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(’orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>
</ul>
</li>
</ul>

》》第二步：设置CSS-

把下面的CSS代码复制到你的主题的css文件中.

#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}

》》第三步：Javascript代码

把下面的js代码放在你的主题的<head></head>中.

<![CDATA[//><!–
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouSEOver=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouSEOut=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
//–><!]]>

首页和目录页显示摘要以及图片的方法

发表回复

在WordPress系统中，默认的首页和目录页使用的书全文输出，这对于文章内容较长的博客来说很不方面，下面我介绍一个方法，可以简单的实现在WordPress首页和目录页显示摘要而非全文。

　　首先找到wp-content/themes下你使用的模板目录，查找目录中的文件，如果有home.php则修改home.php，没有的话就修改index.php，找到&lt;?php the_content(); ?&gt;这一行，将其修改为以下代码：

 &lt;?php if(is_category() || is_archive() || is_home() ) {
     the_excerpt();
 } else {
     the_content(‘Read the rest of this entry &amp;raquo;’);
 } ?&gt;
 &lt;div&gt;&lt;div&gt;&lt;?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?&gt; so far | &lt;a href=”&lt;?php the_permalink() ?&gt;”&gt;Read On &amp;raquo;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;

　　这时，你的WordPress首页和分类就显示为摘要信息而不是全文信息了。

　　这段代码可以在你的首页、存档页、目录页使用摘要输出，使用摘要输出后，整个WordPress的重复内容就少多了，很利于搜索引擎优化。

         关于首页图片，如果未使用上述代码，可以很直接的用Gallery相册的代码实现，当然前提是你用的这个插件，即直接把其自带显示图片的代码放入摘要当中。如果使用了上述摘要显示代码，则可用HTML图片代码显示，例如：<img src=”图片地址” alt=”1002891drvip1″ width=”460″ height=”133″ />，把其放在日志摘要部分即可，建议日志用一张醒目图片就可以，太多了对于网站速度不利。

WordPress

发表回复

WordPress目前世界上最流行的博客软件，我也是看中它Famous和强大的插件以及实用性，可以充分简单的发挥自己的creativity，又可以随心所欲的了解运用HTML代码以及PHP+MYSQL的运作。下面是如何建立初期操作的示范：

使用WampServer可以简单架设Apache+PHP+MySQL服务器，安装使用起来都非常简单，不需要太多复杂的设置，就可以调试一些流行的PHP+MySQL程序，如WordPress,Discuz！等。

1.下载安装

下载WampServer2.0 一路Next就可以完成安装，安装完成后启动，在状态栏可以看到WampServer的图标，软件是多国语言版，当然包括中文语言了。

2.软件配置

在浏览器里输入http://localhost/或127.0.0.1就可以访问了，自带了一个index.php页面，在tools里包含了 phpinfo(),phpmyadmin和sqlitemanager三个工具。打开phpmyadmin会在下方看到提示，root用户没有设置密码，需要先为root帐户设置密码。

点击phpmyadmin页面中部的“权限”，可以看到“用户一览”，即root localhost这一行，点击编辑权限图标（1个小人拿个笔的那个），在打开的页面找到“更改密码”，为root用户设置密码，并点击“执行”。


然后刷新页面，会看到错误提示，这是因为帐户已经设置密码。

到WampServer程序安装目录，在apps目录找到phpmyadmin的目录，打开phpmyadmin目录里面的config.inc.php文件，找到下面这一行：

$cfg[‘Servers’][$i][‘password’] = ”;

在等号右面的单引号里面输入刚才设置的密码，重新打开phpmyadmin的页面并刷新，这时候phpmyadmin就可以正常访问了。

这样，一个PHP + MySQL的服务器就架设好了。

3.新建wordpress的数据库

在浏览器输入http://localhost/phpmyadmin/，在“创建一个新数据库”，输入WP，点击“创建”，用来存储wordpress数据。

4.wordpress的安装

配置wp-config.php文件

define(’DB_NAME’, ‘wp’); // 输入第三步所建立的数据库的名字
define(’DB_USER’, ‘root’); // 数据库用户名 默认为root
define(’DB_PASSWORD’, ‘******’); // 输入第二步软件配置中设置的密码
define(’DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value
define(’DB_CHARSET’, ‘utf8′);
define(’DB_COLLATE’, ”);
define(’DB_COLLATE’, ”);

下载wordpress2.5,将解压后的wordpress文件夹拷贝到WampServer的安装目录下的WWW文件夹下，在浏览器输入http://localhost/wordpress/就可以进行安装了。

安装过程与在虚拟机上安装一样，传说中的5步安装法。

安装完成后，在浏览器输入http://localhost/wordpress/，就可以看到本机的wordpress站点了。以后调试和修改就可以都在本机上完成了，等都修改好了在传到服务器上。这样是不是很安全，也很简单啊。

5.其他php程序的安装与上面的步骤一致。Good Luck and Enjoy It!