日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

发表于 更新于 分类于

此插件可以根据页面的宽度，进行自适应宽度调整，适合于Ipad Iphone Andoroi等系统访问网站时使用。

下载地址
http://wordpress.org/extend/plugins/simple-slider-ssp/

WP Slider Plugin的使用方法
在后台左侧边栏上找到Slider, Add new。

输入任意的Slider名称

Add Image 添加图片 完了后，点击右侧save进行保存

1）文章中调用的方法 Shortcode， 复制到编辑的文章中既可调用
2）首页及特殊页面调用时， 其中的数字为生成slider时的数字。

发表于 更新于 分类于

实现步骤
1、新建tab.js文件，加入如下代码

1
2
3
4
5
6
7
   //侧边栏TAB效果   
jQuery(document).ready(function(){   
jQuery('#tab-title span').click(function(){   
    jQuery(this).addClass("selected").siblings().removeClass();   
    jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');   
});   
});
阅读全文 »

发表于 更新于 分类于

1.nextpage标签的作用及使用方法。
nextpage标签，确切地说是，<!- -nextpage- ->代码，是wordpress内置的用于实现文章分页的一个page标签。您可以在一篇文章中插入多个nextpage标签实现多个分页。在文章中插入该标签后，从文章开头至第一个nextpage标签为文章的第一个分页内容，第一个nextpage标签和第二个nextpage标签之间为文章第二个分页的内容，以此类推，直至文章结束。这一点和more标签不同。
然而，有一点要注意，如果more标签在nextpage标签之前的话，在首页的输出中，还是会被more标签截断的。
2.如何在编辑时插入nextpage标签？
在wordpress2.3中，虽然已经内置nextpage标签的输出功能，但在官方版中nextpage标签的输入默认都是被隐藏起来的。因而需要我们修改代码来实现输入。而具体为什么会被隐藏，原因就不得而知了。注，有些非官方版的WP可能已经解开默认的nextpage输入了。
a.可视化模式输入
要解开可视化编辑器或富文本编辑器的nextpage标签输入隐藏的话，进入wp安装目录下的\wp-includes\js\tinymce，用文本编辑器打开tiny_mce_config.php，查找下面代码：”wp_more”，2.3.1版中在line32

阅读全文 »

发表于 更新于 分类于 
 前面我们已经制作完成博客所有公用页面sidebar.php、footer.php和header.php，今天开始我们就要制作单独的页面了。现在我们要制作的是索引页index.php，这里我们可以暂时把它理解成主页，但事实上它并不是首页这么简单（点此查看原因）。

 在主页中主要就是文章列表，将你博客上的文章一篇一篇地列出来。你可能已经注意到，主页中每篇文章的样式都是一样的，只是标题、时间、作者和摘要等文字内容不一样而已，嗯！我们制作index.php也只需要一篇文章的html代码，不需要手动地去写那么多文章的html，况且这样也不是动态的内容。我们只需要一个循环就可以将所有文章显示到首页上，循环就是重复做某件事情，这里的循环是重复地输出文章。如果你之前学过任一门计算机程序设计语言的话，就不难理解什么是循环，循环的作用也一想就通，如while，for，foreach……

 在这里插一句，如果你真的想了解如何制作主题，请打开的文本编辑器，跟着我一步一步地操作，一步一步地修改，每做一次修改就刷新一下你的博客看看有什么变化，这样才能够加深你的理解。如果你懒得动手，建议以后的内容就不用看了，看了对你帮助也不大。

 现在开始制作index.php。初始情况下index.php中有三篇文章，打开index.php你可以看到文章的3个标记<!-- Blog Post -->，我们现在其他将两篇文章的代码删除，留下一篇，并将文章摘要去除。修改后的代码是这样的：
阅读全文 »

发表于 更新于 分类于 
制作好了header.php 和 footer.php ，今天我们来制作侧边栏sidebar.php。由于侧边栏的可定制性实在是太强了，所以本节内容比较难，我讲解起来也比较困难，有些内容会被略掉！

 作为各个页面公用的侧边栏，我们还是像制作header.php 和 footer.php那样，从index.php中提取侧边栏，放到sidebar.php。好，现在在你的主题目录Aurelius下新建文件sidebar.php，从index.php中提取一下代码，放到sidebar.php中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Column 2 / Sidebar -->
    <div class="grid_4">
        <h4>Catagories</h4>
        <ul class="sidebar">
            <li><a href="">So who are we?</a></li>
            <li><a href="">Philosophy</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Staff</a></li>
            <li><a href="">Clients</a></li>
        </ul>
        <h4>Archives</h4>
        <ul class="sidebar">
            <li><a href="">January 2010</a></li>
            <li><a href="">December 2009</a></li>
            <li><a href="">Novemeber 2009</a></li>
            <li><a href="">October 2009</a></li>
            <li><a href="">September 2009</a></li>
            <li><a href="">August 2009</a></li>
        </ul>
    </div>
    <div class="hr grid_12 clearfix">&nbsp;</div>
阅读全文 »

发表于 更新于 分类于

上节内容我们已经弄好了博客的页头header.php，今天我们就一起来制作页脚footer.php。footer.php与header.php差不多，写这个文件的目的也是为了精简代码，提高代码的重用性，Aurelius主题目录中的所有页面的页脚代码几乎都是一样的，我们就把这些代码提取出来放到footer.php。

在Aurelius主题目录中新建文件footer.php，我们提取出index.php中的页脚代码拷贝到footer.php中(如果以后你制作自己的主题，可以根据需要决定哪些是footer代码)：

1
2
3
4
5
6
<!-- Footer -->
<p class="grid_12 footer clearfix"> <span class="float"><strong>Design By</strong> QwibbleDesigns&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Code By</strong> <a href="http://www.ludou.org/">Ludou</a></span> <a class="float right" href="#">top</a> </p>
</div>
<!--end wrapper-->
</body>
</html>
阅读全文 »

发表于 更新于 分类于

你可以尝试用文本编辑器打开从WordPress主题制作全过程（三）：HTML静态模板制作下载到的 .html 文件，不知道你有没有发现他们头部的代码都非常的相似呢？其实我们可以提取这部分相似的代码，放到一个单独的文件header.php中，各个页面想用这部分代码的时候再用php的include包含进去，省的每个页面里面都要写这部分代码，更改起来也可以达到一改全改的目的。

再次提醒：如果你不打算动手编写代码，这个系列教程就别看了，对你无益！

接着我们上次创建的主题目录wp-content\themes\Aurelius，在该目录下新建一个php文件header.php，我们提取出index.php中的头部代码复制粘贴到header.php中，下面是的代码就是目前header.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aurelius | Blog</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12 clearfix">
<!-- Text Logo -->
<h1 id="logo" class="grid_4">Aurelius</h1>
<!-- Navigation Menu -->
<ul id="navigation" class="grid_8">
<li><a href="contact.html"><span class="meta">Get in touch</span><br />
Contact Us</a></li>
<li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
Blog</a></li>
<li><a href="index.html"><span class="meta">Homepage</span><br />
Home</a></li>
</ul>
<div class="hr grid_12 clearfix">&nbsp;</div>
<!-- Caption Line -->
<h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
<div class="hr grid_12 clearfix">&nbsp;</div>
阅读全文 »

发表于 更新于 分类于

一个WordPress主题至少包含以下两个文件：
style.css
index.php
好，现在就开始我们的WordPress主题制作。在你的WordPress目录 wp-content\themes\ 下新建一个文件夹，命名为Aurelius，将WordPress主题制作全过程（三）：HTML静态模板制作下载到的style.css和index.html放到该目录下，再将index.html重命名为index.php，这样wp-content\themes\Aurelius目录下就有下面两个文件：

style.css
index.php
登陆你的WordPress博客管理后台 – 外观，里面是不是多了一个主题”Aurelius”呢？如下图所示：

阅读全文 »

发表于 更新于 分类于

制作WordPress需要了解PHP，但是不管怎样，你的博客页面都是一张网页，网页之所以能够在浏览器中显示出来，是因为最终传送给浏览器的是HTML、CSS和JS等终端代码，最终由这些代码控制浏览器的显示结果。制作WordPress主题也不例外，它们都是网页，网页最基本的是HTML。要想制作WordPress主题，首先得设计主题界面，含蓄、简约、厚重、奔放……，风格完全随你，接着再将你的设计理念转化为.html，并能在浏览器中正常显示出来。

本系列教程不会教你如何去设计博客的界面，也不会教你HTML和CSS基础知识，而是假定你已经有HTML和CSS基础了，如果你不会HTML，也不会CSS，后面的东西恐怕对你来说就像天书了。

本系列教程将使用由tutsplus无偿提供的html模板Aurelius为例，来讲解WordPress主题的制作过程，其他模板的制作也类似。下面提供该HTML模板文件下载，我们将以此来练习如何将HTML静态页面与PHP代码结合，制作WordPress主题。下载后，里面的html文件都是可以直接双击打开的。

可能这个模板并不适合每个人的口味，但这个用于我们的主题制作练习已经足够了。另外你可能会诧异，怎么是英文版的？放心，到了后面你就会知道，是否英文版都没多大关系。下面说说下载到的这些文件的用途：

首页：index.html
存档页：archive.html
页面：page.html
文章页：single.html
联系页：contact.html
无边栏页：full_width.html
图片：/images/
样式表：style.css
缩略图：screenshot.png
大多数博客所能看到的页面类型也基本就这些。你可能已经注意到，不管你用哪个WordPress主题，不同的文章页面除了标题和内容不同以外，其他东西基本都是一样，这就是所谓的模板。

发表于 更新于 分类于

在开始制作WordPress主题之前，首先得了解WordPress主题到底由哪些文件构成，你得清楚WordPress程序是怎样与主题文件连接的。以下是WordPress默认主题default文件夹下的所有模板文件：

WordPress主题文件

看了上图，可能你还摸不着头脑，到底这些文件是干什么的。WordPress的主题是用PHP编写的，而不是纯HTML + CSS，所以模板文件的后缀名是.php，如果你想精通WordPress的主题制作，完美控制你的博客，最好要熟悉PHP编程。要是不会PHP编程怎么办？就做不了WordPress主题了吗？那也不是，至少看完本系列教程，你也能够掌握基本的WordPress主题制作方法。下面是WordPress主题文件层次结构，它会告诉你：当WordPress显示特定的页面类型时，会使用哪个模板文件呢？只有了解了以下主题层次结构，你才能知道你的WordPress主题到底需要写哪些文件。

阅读全文 »