wordpress仿站教程#7:制作index.php
最近比较忙,忙着找工作,经济不景气,在本地稳不到好点的工作,目前还在待业中,郁闷,家在农村,割稻,摘茶子,事也比较多,准备国庆后去外面转转!
前段时间介绍了仿站的首页分解,
仿站需要有一定的html基础,首页分解是第一步,这步必须做好,要不然下面很难进行工作!
- <?php get_header();?>
- <div id="wrap">
- <div id="container">
- <div id="content">
- <div id="main">
- <article class="post" id="830" itemscope="" itemtype="http://schema.org/Article">
- <h2><a itemprop="name" class="title" href="https://www.xxko.net/wordpress-theme-index.html" title="wordpress仿站教程#3:首页分解"> wordpress仿站教程#3:首页分解 </a></h2>
- <div class="info"> <span class="date">2016-08-03</span> <span class="author" itemprop="author">随之长风</span> <span class="views">阅读: 8 次</span>
- <div class="act"> <span class="comments"> <a href="https://www.xxko.net/wordpress-theme-index.html#respond">抢沙发</a> </span>
- <div class="fixed"></div>
- </div>
- <div class="fixed"></div>
- </div>
- <div class="content" itemprop="description">
- <p>在
- 这篇中,我们将要着手开始写 WordPress 代码,这里建议搭建首先在本地电脑上安装
- WordPress,而不是安装到服务器上,因为本地更方便测试。第1步:打开 XAMPP 控制面板。第2步:创建你的主题文件夹。在你本地安装的
- WordPress 主题文件夹下(应该在xampp/htdocs/wordpress/wp-content/themes),创建一个新的文件夹
- ...</p>
- <p style="float:right;"><a itemprop="url" href="https://www.xxko.net/wordpress-theme-index.html" title="阅读全文:wordpress仿站教程#3:首页分解" rel="nofollow"><strong>阅读全文…</strong></a></p>
- <div class="fixed"></div>
- </div>
- <div class="under"> <span title="分类" class="categories"> <a href="https://www.xxko.net/category/internet" rel="category tag">网络教程</a> </span> <span class="tags" itemprop="keywords"><a href="https://www.xxko.net/tag/wordpress" rel="tag">wordpress</a>, <a href="https://www.xxko.net/tag/%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c" rel="tag">主题制作</a></span> </div>
- </article>
- <div id="pagenavi">
- <div class="wp-pagenavi"><span class="pages">页数</span> <span class="page-numbers current">1</span><a class="page-numbers" href="https://www.xxko.net/page/2">2</a><a class="page-numbers" href="https://www.xxko.net/page/3">3</a><span class="page-numbers dots">…</span><a class="page-numbers" href="https://www.xxko.net/page/20">20</a><a class="next page-numbers" href="https://www.xxko.net/page/2">下一页 ?</a></div>
- </div>
- <div class="fixed"></div>
- </div>
- </div>
- <?php get_sidebar.php(); ?>
- <div class="fixed"></div>
- </div>
- <?php get_footer();?>
上面代码是分解出的
首先用DW打开index.php,设计栏下,点选文章部分,然后选择
- <?php if (have_posts()) : ?>
- <?php while (have_posts()) : the_post(); ?>
这段代码的意思是循环开始代码。
在代码的下面添加
- <?php endwhile; ?>
- <?php endif; wp_reset_query(); ?>
循环结束标签,然后保存。在仿站过程中可以随时浏览首页情况,如果你的wordpress有文章,并设置了首页文章数后会发现,这时出现几篇相同的文章列表简介。
重头戏,循环代码更改。
- <article class="post" id="830" itemscope="" itemtype="http://schema.org/Article">
- <h2><a itemprop="name" class="title" href="https://www.xxko.net/wordpress-theme-index.html" title="wordpress仿站教程#3:首页分解"> wordpress仿站教程#3:首页分解 </a></h2>
- <div class="info"> <span class="date">2016-08-03</span> <span class="author" itemprop="author">随之长风</span> <span class="views">阅读: 8 次</span>
- <div class="act"> <span class="comments"> <a href="https://www.xxko.net/wordpress-theme-index.html#respond">抢沙发</a> </span>
- <div class="fixed"></div>
- </div>
- <div class="fixed"></div>
- </div>
- <div class="content" itemprop="description">
- <p>在
- 这篇中,我们将要着手开始写 WordPress 代码,这里建议搭建首先在本地电脑上安装
- WordPress,而不是安装到服务器上,因为本地更方便测试。第1步:打开 XAMPP 控制面板。第2步:创建你的主题文件夹。在你本地安装的
- WordPress 主题文件夹下(应该在xampp/htdocs/wordpress/wp-content/themes),创建一个新的文件夹
- ...</p>
- <p style="float:right;"><a itemprop="url" href="https://www.xxko.net/wordpress-theme-index.html" title="阅读全文:wordpress仿站教程#3:首页分解" rel="nofollow"><strong>阅读全文…</strong></a></p>
- <div class="fixed"></div>
- </div>
- <div class="under"> <span title="分类" class="categories"> <a href="https://www.xxko.net/category/internet" rel="category tag">网络教程</a> </span> <span class="tags" itemprop="keywords"><a href="https://www.xxko.net/tag/wordpress" rel="tag">wordpress</a>, <a href="https://www.xxko.net/tag/%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c" rel="tag">主题制作</a></span> </div>
- </article>
将上面代码中文章连接地址替换成
- <?php
- if(is_singular()){the_content();}else{
- $pc=$post->post_content;
- $st=strip_tags(apply_filters('the_content',$pc));
- if(has_excerpt())
- the_excerpt();
- elseif(preg_match('/<!--more.*?-->/',$pc) || mb_strwidth($st)<300)
- the_content('');
- elseif(function_exists('mb_strimwidth'))
- echo'<p>'
- .mb_strimwidth($st,0,300,' ...')
- .'</p>';
- else the_content();
- }?>
上面这段代码的意思是,对文章显示优化显示,如文章有设置简介显示简介部分,或者设置了分隔线,显示分隔线以上部分,没有则只显示文章前300字节。
保存并刷新首页,现在就可以看出文章循环部分效果已经出来,最后对分类,关键字,以及分页替换。
关键字:
分类:
分页:安装 WP-PageNavi 插件,
到此index.php页面制作完成,下节将讲解侧边栏制作。