10

WordPress美化方案:修改主题文件

 3 years ago
source link: https://greyli.com/wordpress-beautification-programmes-modify-the-theme-files/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

WordPress美化方案:修改主题文件

通过修改主题文件来实现一些外观和功能效果,这样避免了使用大量插件,不会影响加载速度,也没有兼容性的问题。

这个系列的另外两篇:
WordPress美化方案系列:插件篇
WordPress美化方案系列:插入代码

主题文件编辑入口:仪表盘——外观——编辑
主题文件的构成

主题文件主要构成

主题文件主要构成(点击查看大图)

下面一些应用示例。

一、修改页脚的文字

编辑主题文件:footer.php
找到相关的文字(一般是“自豪地采用WordPress”或是”Proudly by WordPress“),可以删除或修改。然后点击更新文件。

二、在每一页加入版权声明

编辑主题文件:single.php
在图中位置插入代码,会在文章下方生成一个文本,效果见第二张图。

版权声明代码

版权声明代码(single.php)

版权声明效果图

版权声明效果图

三、文章字数统计

编辑主题文件:functions.php,single.php
在functions.php末尾插入下面这段代码(一个统计文章字数的函数):

//字数统计
function count_words ($text) {
global $post;
if ( '' == $text ) {
$text = $post->post_content;
if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '文章字数:' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') . '字';
return $output;

然后在single.php需要显示字数的地方插入:

<?php echo count_words ($text); ?>

四、个性化评论框

编辑主题文件:comments.php
这里可以实现的功能主要有:

  1. 自定义评论区的各个字段
  2. 增加或删除输入框,修改字段,增加提示字符

首先在comments.php里加入一个评论框函数(comment_form()):

<?php comment_form($args); ?>

$args是你想要修改的字段或输入框,用来覆盖原有的内容。

比如你想修改评论框的标题(一般为“留下评论”)。通过增加下面这段代码即可实现:

<?php $args = array('title_reply'=>'说说你的想法吧!')?>
<?php comment_form($args); ?>

其中‘title_reply’是代表评论框标题的参数,后面是你要设置的内容。
类似的,可以在数组(array)加入更多参数,比如评论框上面的文字(’comment_notes_before)、评论框下面的文字(’comment_notes_after’)。更多的参数见官方文档

评论输入框通过传入$fields参数实现,但直接放到$args里更方便些:

<?php $args = array(
'fields' => array(
'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用[email protected]" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>'
)?>

下面是我博客上的评论框代码(效果见下方评论区):

<?php $args = array(
  'title_reply'       => __( '说说你的想法吧!' ),
  'comment_notes_before' => '<p>邮箱不会被公开,必填项已用<span class="required">*</span>标出。',
  'fields' => array(
'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用[email protected]" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>'
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>',
);?>
<?php comment_form($args); ?>

你可以只更改你想要设置的内容,删掉其他的内容。不要忘记把参数放进函数里(最后一行)。

具体内容见官方文档:Function Reference/comment form

五、修改边栏小工具

文件位置:wp-includes/widgets
样式文件:style.css

举两个小例子:

  1. 删除功能里的WordPress.org字段
    找到wp-includes/widgets文件夹下找到class-wp-widget-meta.php,打开后找到无序列表<ul></ul>里的四个<li>标签,删除最后一个即可。
  2. 修改日历中有活动日期的显示样式
    默认的日历样式太朴素,看不出今天的日期,有活动的日期也不够明显。在style.css中加入下面这段,即可使有发表文章的日期数字显示为粗体,绿色。
#wp-calendar tbody a { /*当天发表文章的*/
        font-weight:bold;
        color:green;

      其他的比如设置今天的日期数字为斜体加粗体:

#wp-calendar #today { /*今天*/
        font-weight:bold;
        font-style:italic;

以上只是给出了几个修改主题文件的示例,具体还有很多内容可以探索,从官方文档开始新旅途吧!

本条目发布于2016年6月6日。属于计算机与编程分类,被贴了 WordPress 标签。 ← 我的笔记之路 WordPress美化方案:插入代码 →

撰写评论 取消回复

电子邮件地址不会被公开,必填项已用*标出。

评论

姓名 *

电子邮件 *

站点

在此浏览器中保存我的名字、电邮和网站。

当有人回复我时,发送电子邮件提醒我。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK