第2回：网络小白使用wordpress建立网站纪实（2）

2022-05-01 • 管理员 • 0 • 1233 • 0 • 0

百闻不如一见，兵难隃度。臣愿驰至 金城 ，图上方略。

节选自 汉书，赵国充传

书接上回，相较于书籍上的理论知识，付费课程的视频以实践角度出发，着重解决了网站实际建立过程中会遇到的重点问题（可能是因为是非常熟练的关系，其建立过程中的细节未被着重提及，这些细节将是本篇文章中的重点），在学习以下两堂付费课程之后，我对wordpress有了更深一步的认识，因此，我也强烈建议想建网站的小伙伴们仔细学习：

如果你阅读过我的上一篇博文，你应该能够在本地windows环境下建立一个phpstudy引擎的本地网站，并能够在上面建立一个基础的wordpress博客论坛应用，因此，作者建议先学习核心知识课程（制作主题），然后再学习服务器部署运维课程（在ECS上实际部署），作者先观看了第一部一整部课程，然后又从头实现了所有的视频中的练习，受益匪浅，以下是关于主题开发课程的心得体会，以及作者自己对学习到的主题的修改，以满足自己网站主题的需求。

-Can you fly that thing?
-Not yet.
-Operator.
-I need a pilot program for a B-212 helicopter.
-Hurry.
-(a few moments later.)
-Let’s go.

节选自黑客帝国台词（01:47:18）

通过主题制作课程的学习，大家都应该能制作出来一个如下图所示的主题（导航菜单栏有可能有少许不同）：

该主题上PHP文件都经过详细的讲解，也经过自己按图索骥，一一实现，但是assets文件夹里的内容，课程中并未涉猎，如果不理解这些代码，相关主题的定制也会遇到很多困难，因此，作者还是鼓起勇气的查看了这些文件，不看不知道，一看吓一跳，仅仅css文件夹中app.css文件就200多K，10000多行，这么多代码什么时候才能学完，作者认为这些文件应该不是凌风老师一个人完成，因此，硬着头皮打开看了一下，在注释中找到了Bootstrap字样。上网一搜，结果如下：

Bootstrap中文网 (bootcss.com)：是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架，课程示例用的版本是bootstrap-3.3.7-dist.zip，相关下载地址为：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)。

下载完把css里的bootstrap.css使用beyondcompare对比以下app.css发现还有高手，因此，找到了第二段代码，是bootstrap-theme.css，再把这两个文件拷贝到一起和app.css对比，发现还有高手，就这样，我又拷贝了app.css用到的其他框架下的css文件分别是：

额外添加的css代码就不多了，这个应该就是课程老师添加的css代码。

在js文件夹中，包含三个文件，其中：

img文件夹里包含一些图片就不再赘述。

由上图可知，通过课程学习的主题，与本网站上最终展现的主题还有所不同，换句话说，课程学习制作出的主题并不能满足作者对自己博客论坛的主题要求，因此，从顶部到底部作者做了一些修改，修改之前，有一些准备工作：

  1. 打开任意浏览器（Edge 或者Chrome）的“开发人员工具”，在“网络”页面勾选“保留日志”和“禁用缓存项”（作者使用的是edge，一般来讲，由于微软掌握着操作系统入口，只要他涉猎（免费）某种类型的应用程序，长期来看，其他程序能比得过的很少，比如：VS Code 比如：Edge，因为它的优化是底层的，可以得到操作系统的全面支持），因为CSS文件和图像文件作为缓存，会保存在浏览本地文件夹，部分效果可能不能通过刷新之后就能看到，因此，调试效果时，需要禁用缓存，并打开开发人员工具（作者最初设置浏览器为退出时清除缓存，调试过程可谓相当繁琐）。
  2. 如果主题上传到ECS服务器，还是想微调，可以通过wordpress后台中外观->主题文件编辑器中直接修改，不用反复的上传下载修改。修改后，刷新看效果时，别忘打开开发人员工具。
  3. 在开发人员工具“元素”页面，可以通过左上角按钮选择元素，检查页面上的CSS布局，还可以通过直接修改CSS布局内容（包括取消勾选，修改数据），直观的看到效果，修改满意后，在找到对应的CSS文件行，直接在VS Code中或者主题文件编辑器中修改，非常强大，非常方便。

具体修改项目如下：

  • 在左上角添加自己制作的logo，通过在header.php中添加如下代码，然后就可以在外观->自定义->站点身份中，通过上传图片为网站添加一个logo，还可以添加一个站点图标，添加位置由php函数在文件中位置确定。
<?php the_custom_logo();?>

同时使用div元素包住Logo，在元素添加logo-div类，并给该类添加css布局如下（否则显示可能会撑出导航菜单）：

.logo-div
{ 
    font-size: 1.2em;
    font-weight: bold;
    height: 100%;  
    float: left; 
}

作者本来准备将顶部导航做成两行，组织成上一行网站名，下一行网址的方式，但没办法做到，但是又有在网站展示网址的需求，因此就将网址做到了logo图片之中。

  • 在登陆后，“注册|登录”按钮应该替换成“当前用户名|注销”选项，相关代码在header.php中修改如下：
<?php  $user   = wp_get_current_user();  if($user->exists()):?>
<li class="login-out">
	<a href="<?php echo  get_author_posts_url( $user->ID)?>">您好,<?php echo $user->display_name?></a> | <a
		href="<?php echo wp_logout_url(wordpresskt_get_current_url()) ?>">注销</a>
</li> 
<?php  else:?>
<li class="login-out">
	<a href="<?php echo wp_registration_url() ?>">注册</a> | <a
		href="<?php echo wp_login_url(wordpresskt_get_current_url()) ?>">登录</a>
</li>
<?php  endif;?>
  • 轮播图作者不想要，将相关代码删除，但是想在主页添加一个banner图片，该图片只显示在主页之上，在index.php顶部添加相关代码如下：
<div >
	<?php if(is_home()):?> 
		<img src="<?php echo get_theme_file_uri('/assets/img/banner.jpg')?>"  class="img-fluid" alt="banner.jpg">
	<?php endif;?>
</div>

添加banner图片之后，图片与body的间距与其他页面不同，明显大了一倍，因此作者在index.php中的内容主体div标签中添加site-content_index类，并在app.css文件中添加如下代码：

.site-content_index {
    padding-top: 20px;
    font-size: 16px;
}
  • 边栏中的Monster Widget虽然很全面，但是太多了，好像只是作为填充也没人关注，作者自己添加了一些小工具，并将小工具变成小工具组，为每一个小工具添加了小工具的标题，标题是好h2元素标签，有点大，因此作者在开发人员工具中定位了影响h2的CSS布局代码，并做了相应修改。
  • 网站上很多边栏都设置在右边，这个是因为兼容手持设备界面显示，在手持设备中，一般会将主要内容和边栏（一般都包含在html的div元素当中）按照从左到右的顺序依次垂直显示，如果边栏在左边就会先显示边栏，再显示主要内容，不符合以主要内容为主的显示方式，但是边栏在右边这种方式让作者感到非常别扭，换句话说，作者有强烈的将边栏放至左边的需求，作者最终实现了这个需求，其步骤如下：
    1. 在主题PHP文件源代码（singular.php，archive.php，index.php）中，将边栏代码提到主体代码之前，刷新显示，就会发现边栏在左侧显示。
    2. 左侧显示的边栏右侧margin（也许是padding）不对，作者一度束手无策，经过反复查询源代码和CSS文件，作者锁定两个CSS类col-md-3 pdfixr，这应该是bootstrap定义的布局类，但是由于上线时间要求，作者没有时间去完全学习bootstrap，但是通过字面意思，也能够明白这个col应该是列的意思，而3应该是宽度，这个pdfixr的r应该是right右侧的意思，作者猜想应该会有一个pdfixl，作者找到pdfixr在app.css文件中的位置，也发现了一个pdfix类的布局定义，更确定了作者的猜测，作者依葫芦画瓢，定义了一个pdfixl的CSS布局，然后将sidebar.php文件中的pdfixr文件名改成pdfixl，大功告成。CSS布局代码如下：
.pdfixl{
padding-left:0; 
}

对于在手持设备上先显示边栏在显示内容的问题，作者最终想了一个方法，作者添加了如下CSS布局代码，在手持设备中，隐藏了除搜索框以外的所有的边栏小工具，代码如下：

@media (max-width:1000px){
     #block-9,
     #block-10,
     #block-7
     {
        display: none; 
     }
}

@media (max-width:1000px)含义是，在设备宽度1000像素以内，执行如下操作，具体含义可以参考网络上的关于的CSS标签@media的（通过百度搜索@media CSS可以出现一堆解释）解释，作者也是在书中读到的这一个css标签含义，佐证了吃书的重要性。

PS：主题压缩包通过wordpress后台上传安装之后，小工具可能会有变化，因此，可能需要在线重新添加小工具，而小工具的ID（#block-9之类）也可能不同，因此，也需要在“主题文件编辑器”通过在线修改css文件。

后期，通过学习bootstrap中的列排序功能，彻底解决了左侧边栏在手持设备显示在上面的问题（全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com) 中列排序章节）。

  • 在页面上作者不想显示边栏，因此，在Page.php中删除了边栏代码，另外将内容主体的css类由col-md-9，改成了col-md-12=（边栏col-md-3+内容主体col-md-9），发现页面果然变大了，也佐证了了作者对这个类的猜想。
  • 在底部菜单需要添加ICP备案号，相关代码如下，
<p class="copy" >
	<a href="http://beian.miit.gov.cn" target="_blank" style=" color:white !important; ">备案号：苏ICP备2022015451号-1</a>  
</p>

底部的文字需要居中显示，另外底部的颜色我不喜欢，通过CSS文件修改了CSS的ID为footer的布局代码如下：

#footer {
    background: #007ACC;
    margin-top: 20px;
    padding: 30px 0;
    text-align: center;
}
  • 在详情页面作者不想添加过多的无谓的特色图片，在作者看来这些图片除了增加加载时间以外，没有什么用处，因此，将特色图片显示代码删除，并调整相关布局大小至满意的程度。
  • 文章元信息标签改成时间，作者，评论数还有阅读数四项，另外还添加了，作者阅读自己发布的文章不增加阅读数的功能，另外还按照自身意愿修改了元信息标签的图形标志，可以在Font Awesome，一套绝佳的图标字体库和CSS框架 (dashgame.com)链接页面中点击“示例”导航菜单，查看图形标志的使用方式，图形标志具体的类名可以直接点击图形就能得到，相关代码如下（以archive.php中的代码为例）：
<div class="post-meta">
<span class="post-meta-it dtime">
<i class="fa fa-clock-o"></i><?php the_time('Y-m-d');?></span> 
<span class="post-meta-it auth">    
<i class="fa fa-user-circle"></i> <?php the_author(); ?>  
</span> 
<span class="post-meta-it cats"><i class="fa fa-comments-o" ></i>
<?php echo get_comments_number(); ?></span>
<span class="post-meta-it views">
<i class="fa fa-search" ></i><?php echo wordpresskt_get_postviews(get_the_ID()); ?> </span>  
<span class="post-meta-it thumbs-up"><i class="fa fa-thumbs-up"></i>
<?php echo wordpresskt_get_like(get_the_ID()); ?> </span>  
<span class="post-meta-it thumbs-down"><i class="fa fa-thumbs-down"></i>
<?php echo wordpresskt_get_unlike(get_the_ID()); ?>		</span>  
</div>

以上代码还包含了点赞和点踩次数，这部分内容由下回讲解。

  • 还有一些字体大小和字体颜色的修改，主体内容背景色修改，还有些其他修改都可以先在开发人员工具总修改，然后在CSS文件中修改，不再一一赘述。

正如凌风老师所说：掌握了制作主题的能力，也就掌握的修改主题的能力，下回将在主题中使用代码添加点赞和点踩的用户交互功能，敬请期待。

         不喜欢 0

D7FECB19D148C1AD1D829F1CD0E23DB0

发表回复

站内搜索

最新评论

归档日历

2024 年 9 月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
30  

标签云

C++ (3) QT (4) wordpress (4) 人工智能 (1) 变量抽象 (1) 工程实践 (4) 建立网站 (4) 开发环境 (1) 框架 (2) 物理 (2) 状态机 (5)