Love丶FFC's Blog

WordPress搭建自己的网站系统_5:编写一个简易的首页(下)

2019-10-24 22:50:04
阅读：756   •   评论：9
标签：

这篇文章的主要内容

1.首先会编写一个简洁的静态首页，因此会涉及到HTML、CSS。

2.会在静态页面的基础上添加PHP代码，将文件改变为.php文件。

3.穿插讲解一些重点内容。

正式编写之前需要的一些工具

1.前端开发工具：WebStorm（用习惯了^_^）等。

2.后端开发工具：EditPlus（为了方便）等。

正式开始！

1.创建CSS文件夹，再创建以下文件。

创建CSS文件

2.编写Reset.css，对所有的元素进行默认样式重置，具体内容可参看对默认的css样式进行重置。

3.在index.html中引用相关css文件，代码如下。

  1. <link href="CSS/Reset.css" type="text/css" rel="stylesheet">
  2.     <link href="CSS/Public-Header.css" type="text/css" rel="stylesheet">
  3.     <link href="CSS/Public-Bottom.css" type="text/css" rel="stylesheet">
  4.     <link href="CSS/Index.css" type="text/css" rel="stylesheet">

4.编写HTML代码，代码如下。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首页</title>
  6.     <link href="http://localhost/wp-content/themes/Course/CSS/Reset.css" type="text/css" rel="stylesheet">
  7.     <link href="http://localhost/wp-content/themes/Course/CSS/Public-Header.css" type="text/css" rel="stylesheet">
  8.     <link href="http://localhost/wp-content/themes/Course/CSS/Public-Bottom.css" type="text/css" rel="stylesheet">
  9.     <link href="http://localhost/wp-content/themes/Course/CSS/Index.css" type="text/css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <!--公共头部-->
  13.     <div class="Public-Header">
  14.         <div class="Content">
  15.             <ul>
  16.                 <li><a href="#">首页</a></li>
  17.                 <li><a href="#">新闻</a></li>
  18.                 <li><a href="#">编程</a></li>
  19.                 <li><a href="#">归档</a></li>
  20.                 <li><a href="#">搜索</a></li>
  21.                 <li><a href="#">关于</a></li>
  22.             </ul>
  23.         </div>
  24.     </div>
  25. <!--公共头部-->
  26. <!--首页文章-->
  27.     <div class="Index-Article">
  28. 		<div class="Article">
  29. 			<h2 class="Title"><a href="#">我的第一篇文章</a></h2>
  30. 			<p class="Date">2019年10月21日</p>
  31. 			<p class="Content">各种我想说的内容，真的好多呀，好多呀。</p>
  32.         </div>
  33.     </div>
  34. <!--首页文章-->
  35. <!--公共底部-->
  36.     <div class="Public-Bottom">
  37.         <div class="Content">
  38.             <p>WordPress系列教程</p>
  39.             <p>Copyright From http://www.loveffc.cn</p>
  40.         </div>
  41.     </div>
  42. <!--公共底部-->
  43. </body>
  44. </html>

5.Reset.css代码如下。

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     border: 0;
  5.     text-decoration: none;
  6.     list-style-type: none;
  7.     text-underline: none;
  8.     font-family: "微软雅黑 Light";
  9. }
  10.  

6.Index.css代码如下。

  1. .Index-Article{
  2.     width: 1200px;
  3.     height:auto;
  4.     overflow: hidden;
  5.     margin: 0px auto;
  6.     line-height: 3em;
  7. }
  8. .Index-Article .Article{
  9.     width: 1096px;
  10.     margin: 0px auto;
  11.     padding: 50px;
  12.     height: auto;
  13.     overflow: hidden;
  14.     border: 2px dashed #CCCCCC;
  15. }

7.Public-Header.css代码如下。

  1. .Public-Header{
  2.     width: auto;
  3.     background: #A7FFF0;
  4.     height:80px;
  5.     margin-bottom: 20px;
  6. }
  7. .Public-Header .Content{
  8.     width: 1200px;
  9.     height: inherit;
  10.     margin: 0px auto;
  11. }
  12. .Public-Header .Content li{
  13.     float: left;
  14.     line-height: 80px;
  15.     text-align: center;
  16.     width:200px;
  17. }

8.Public-Bottom.css代码如下。

  1. .Public-Bottom{
  2.     width: auto;
  3.     height: 60px;
  4.     background: aqua;
  5.     line-height: 2em;
  6.     margin-top: 20px;
  7.     font-weight: bolder;
  8. }
  9. .Public-Bottom .Content{
  10.     width: 1200px;
  11.     height: inherit;
  12.     margin: 0px auto;
  13.     text-align: center;
  14. }

最终效果如图。

以上代码生成的界面效果

9.现在在<div class="Article"></div>之间添加获取文章数据的php代码。代码如下。

  1. <?php // 传递调用参数
  2.           $the_query = new WP_Query(
  3.                       array(
  4.                           'category_name' => '新闻',  // 分类名称
  5.                           'posts_per_page' => 5,      // 最多显示的文章数
  6.                       ) );
  7.           if ( $the_query->have_posts() ) {
  8.              while ( $the_query->have_posts() ) {
  9.                 $the_query->the_post();
  10.                 // get_permalink()是获取文章链接
  11.                 // get_the_title()是获取文章标题
  12.     			// get_the_date()是获取文章日期
  13.                 echo '<h2 class="Title"><a class="Title" href="' . get_permalink() .'" title="'. mb_strimwidth(get_the_title(), 0, 200, '...') .'">' . mb_strimwidth(get_the_title(), 0, 30, '...') .'</h2>
  14. 				<p class="Date"><b>'.get_the_date().'</b></p>
  15. 				<p class="Content">'.get_the_excerpt().'</p>';
  16.              }
  17.           }
  18.           // WP_Query结束都要重置一下
  19.           // 以免影响其他代码
  20.           wp_reset_postdata();
  21.        ?>

10.将HTML文件改为php文件。

11.在WordPress中启用Course主题。

12.在WordPress后台编写一篇文章并发布。

13.在网站首页浏览效果。

前端成功显示文章的数据。

下一篇文章会讲解文章内容页的制作。

评论板

共有 9 条评论

  1. cheap jordans

    I just wanted to thank you for the fast service. as well they look great. I received them a day earlier than expected. similar to I will definitely continue to buy from this site. anyway I will recommend this site to my friends. Thanks!
    cheap jordans https://www.cheaprealjordan.com/

    2023-04-30 16:52 回复

  2. louis vuitton outlet online

    I just wanted to thank you for the fast service. also they look great. I received them a day earlier than expected. which includes I will definitely continue to buy from this site. direction I will recommend this site to my friends. Thanks!
    louis vuitton outlet online https://www.cheapreallouisvuitton.com/

    2023-04-30 19:57 回复

  3. cheap louis vuitton online

    I just wanted to thank you for the fast service. or to they look great. I received them a day earlier than expected. much I will definitely continue to buy from this site. manner in which I will recommend this site to my friends. Thanks!
    cheap louis vuitton online https://www.bestlouisvuittonoutlet.com/

    2023-05-01 06:06 回复

  4. cheap jordans online

    Read reviews and was a little hesitant since I had already inputted my order. or even but thank god, I had no issues. simillar to the received item in a timely matter, they are in new condition. no matter what so happy I made the purchase. Will be definitely be purchasing again.
    cheap jordans online https://www.cheapsneakeronline.com/

    2023-05-15 21:13 回复

  5. cheap jordans for sale

    Read reviews and was a little hesitant since I had already inputted my order. or maybe but thank god, I had no issues. which include the received item in a timely matter, they are in new condition. in either case so happy I made the purchase. Will be definitely be purchasing again.
    cheap jordans for sale https://www.realcheapretrojordanshoes.com/

    2023-05-16 07:02 回复

  6. cheap jordans online

    Read reviews and was a little hesitant since I had already inputted my order. along with but thank god, I had no issues. such as received item in a timely matter, they are in new condition. anyway so happy I made the purchase. Will be definitely be purchasing again.
    cheap jordans online https://www.realjordansshoes.com/

    2023-05-17 00:09 回复

  7. Gealpaste

    When restricting the analysis to the subcohort of 25 women whose date of IUD placement was known, and thus were definitely known to have IUDs that release LNG in therapeutic levels, similar results were observed as in the entire cohort MR ACR categories were higher with LNG IUD in place in 14 of 25 women 56, with an increase by one MR ACR category in 13 25 and an increase by two MR ACR categories in 1 25 compared to the same women s MRI study without LNG IUD; the remaining 11 women 11 25, 44 showed similar BPE cialis with priligy American journal of kidney diseases, 2009, 54 4, 602 609 added to CENTRAL 31 January 2010 2010 Issue 1

    2023-05-19 17:21 回复

  8. intuido

    Common and other side effects of esketamine nasal spray Spravato best price cialis

    2023-06-19 03:09 回复

  9. pwNYNjT

    It has also been suggested that the relevance of alerts can be increased by taking into account the level of evidence for the DDI 20, 21 and the seriousness of the outcome 10, 17, 20, 21, 27, 29, 31 buy cialis canada pharmacy

    2023-08-06 20:32 回复

--------查看该分类下最新文章--------
^
新版博客正在完善中！域名：http://www.loveffc:8080，点击跳转，完全移植后将去除端口号。

Copyright © 2018 - 2021 FFC的小站 - 滇 ICP 备 18010780 号 - 1

- Powered by WordPress & AliYun · Theme by FFC -

- Environment by Windows & XAMPP · Designed by WebStorm & VSCode -

已运行:

访问量：498638