wordpress主题制作的具体实现步骤

2019-05-1714:44:40网站建设与开发Comments2,792 views字数 7687阅读模式

<?php
/*
在根目录 -> wp-content -> themes 下创建mytheme文件夹用来存放创建新主题模板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

在mytheme目录下创建，两个文件，在wp后台外观->主题中就可以看到刚创建的主题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

打开文件输入
*/
?>
/*
Theme Name: 这里填主题名称
Theme URI: 这里填主题介绍的网址，没有就填你的博客网址吧
Description:这里填主题的简短介绍
Author: 作者名
Author URI: 作者的网址
Version: 版本号
Tags: 标签，多个用半角逗号隔开
*/
<?php
/*
在后台主题管理中即可看到主题相关信息，css中主题信息内容必须用注释符号括起来文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

找一个300*225的png图片，命名为放在主题目录下（mytheme文件夹中），在主题管理页中即可看到新建主题的预览图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

//==================================================header================================================================
可以把网站相同头内容放在一个头文件中，在主题目录下新建文件向其中输入输入统一的头部内容
在或想调用该页面的页面中输入
*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

get_header(); //get_header()就相当于将中的代码拷贝到当前的php文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

/*
在主题管理页面，该主题实时预览中，默认打开的页面中即可引入页面的内容
将会被所有的模板页面（主页、分类页、页面、标签页等）所包含，所以中代码应该是动态的。
不同页面的title都是不一样，而且title的设置还会直接影响到SEO的效果，所以这里应该谨慎设置。下面提供一种SEO优化的title写法，
在页面添加
*/
?>
<title>
<?php
if (is_home ()) { // is_home() 当前页面为主页时返回true
bloginfo ( "name" ); // 返回站点标题
echo " - ";
bloginfo ( "description" ); // 返回站点副标题，站点描述
} elseif (is_category ()) { // is_category() 当前页面为分类页时返回true
single_cat_title ();
echo " - ";
bloginfo ( "name" );
} elseif (is_single () || is_page ()) { // is_single() 当前页面为单文章页时返回true 。 is_page() 当前页面为单页面时返回true
single_post_title ();
} elseif (is_search ()) { // is_search() 当前页面为搜索页时返回true
echo "搜索结果";
echo " - ";
bloginfo ( "name" );
} elseif (is_404 ()) { // is_404() 当前页面为404页时返回true
echo "页面未找到!";
} else {
wp_title ( "", true );
}
?>
</title>
<?php
/*
以上添加的php代码运用了条件判断，针对不同的页面采用不同title
在页面中添加默认文件
*/
?>
<link rel="stylesheet" href="<?php%20bloginfo("stylesheet_url"); ?>" type="text/css" media="screen" />
<?php
/*
bloginfo("stylesheet_url");返回的是主题默认文件绝对网址路径，如
http://localhost/wordpress/wp-content/themes/myTheme/
bloginfo("template_url");返回的是主题目录的绝对网址路径，可以用来模板中连接样式图片，如
http://localhost/wordpress/wp-content/themes/mytheme
添加 pingback 通告功能，在页面 <head> 标签中里面添加代码：
*/
?>
<link rel="pingback" href="<?php%20bloginfo("pingback_url"); ?>" />
<?php
/*
添加订阅feed链接，在页面 <head> 标签中添加：
*/
?>
<link rel="alternate" type="application/rss+xml" href="<?php%20echo%20get_bloginfo("rss2_url"); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php%20bloginfo("comments_rss2_url"); ?>" />
<?php
/*
添加wp_head，有些插件需要在网页头部添加一些js或css，要让这些插件能够正常的工作，也让主题有更好的兼容性，应该添加wp_head()函数
页面 <head> 标签中添加
*/
?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

<?php wp_head(); //用于包含WordPress程序输出头部信息 ?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

<?php
/*
显示菜单栏，这里只在菜单栏中列出分类页和page页面，可以根据喜好来列出想要的。中
*/
?>
<ul class="grid_8">
<?php wp_list_categories(); //用于列出博客分类页 ?>
<?php wp_list_pages("depth=1&title_li=0&sort_column=menu_order"); //用于列出博客页面，可不填参数 ?>
</ul>
<?php
//==================================================footer================================================================
/*
与差不多，写这个文件的目的也是为了精简代码，提高代码的重用性。
在主题目录中创建，在或想调用该页面的页面中使用
*/
get_footer();//功能和get_header()类似
/*
在页面添加 wp_footer提高兼容性
*/
wp_footer();
/*
wp_footer()和wp_head()差不多，都是用于提高主题兼容性，毕竟有很多插件要在页脚输出一些东西才能正常工作。
*/
//==================================================sidebar================================================================
/*
在主题目录下新建页面，在或想调用该页面的页面中添加
*/
get_sidebar();
/*
调用页面内容
为使WordPress后台 -> 外观 -> 小工具，可以正常地拖动小工具到侧边栏
在页面的列表格式应按如下举例格式
*/
?>
<div>
<?php
if (! function_exists ( "dynamic_sidebar" ) || ! dynamic_sidebar ( "First_sidebar" )) ://First_sidebar为widget名称，要和中对应的widget name相同
?>
<h4>分类目录</h4>
<ul>
<?php wp_list_categories("depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0"); ?>
</ul>
<?php endif; ?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

<?php
if (! function_exists ( "dynamic_sidebar" ) || ! dynamic_sidebar ( "Second_sidebar" )) :
?>
<h4>最新文章</h4>
<ul>
<?php
$posts = get_posts ( "numberposts=6&orderby=post_date" );
foreach ( $posts as $post ) {
setup_postdata ( $post );
echo "<li><a href="" . get_permalink () . "">" . get_the_title () . "</a></li>";
}
$post = $posts [0];
?>
</ul>
<?php endif; ?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

<?php
if (! function_exists ( "dynamic_sidebar" ) || ! dynamic_sidebar ( "Third_sidebar" )) :
?>
<h4>标签云</h4>
<p><?php wp_tag_cloud("smallest=8&largest=22"); ?></p>
<?php endif; ?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

<?php
if (! function_exists ( "dynamic_sidebar" ) || ! dynamic_sidebar ( "Fourth_sidebar" )) :
?>
<h4>文章存档</h4>
<ul>
<?php wp_get_archives("limit=10"); ?>
</ul>
<?php endif; ?>
</div>
<?php
/*
同时在主题目录下创建文件内容为
*/
/** widgets */
if( function_exists("register_sidebar") ) {
register_sidebar(array(
"name" => "First_sidebar", //name就是给widget指定各自的名称,以便在中分别调用.所以只需要给这两个widget取两个名字就好了。
"before_widget" => "", //定义Widget内容的前后标识符的语句
"after_widget" => "",
"before_title" => "<h4>", //定义Widget标题的前后标识符的语句
"after_title" => "</h4>"
));
register_sidebar(array(
"name" => "Second_sidebar",
"before_widget" => "",
"after_widget" => "",
"before_title" => "<h4>",
"after_title" => "</h4>"
));
register_sidebar(array(
"name" => "Third_sidebar",
"before_widget" => "",
"after_widget" => "",
"before_title" => "<h4>",
"after_title" => "</h4>"
));
register_sidebar(array(
"name" => "Fourth_sidebar",
"before_widget" => "",
"after_widget" => "",
"before_title" => "<h4>",
"after_title" => "</h4>"
));
}
/*
这样WordPress后台 -> 外观 -> 小工具，就可以正常地拖动小工具到侧边栏了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

制作文章列表
例子
*/
?>
<div class="grid_8">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">

<h3 class="title"><a href="<?php%20the_permalink();%20?>" rel="bookmark"><?php the_title(); ?></a></h3>

<p class="sub"><?php the_tags("标签：", ", ", ""); ?> • <?php the_time("Y年n月j日") ?> • <?php comments_popup_link("0 条评论", "1 条评论", "% 条评论", "", "评论已关闭"); ?><?php edit_post_link("编辑", " • ", ""); ?></p>
<div class="hr dotted clearfix"> </div>

<img class="thumb" src="<?php%20bloginfo("template_url"); ?>/images/" />

<?php //the_excerpt(); ?>
<?php the_content("阅读全文..."); ?>

<p class="clearfix"><a href="<?php%20the_permalink();%20?>" class="button right">阅读全文</a></p>
</div>
<div class="hr clearfix"> </div>
<?php endwhile; ?>    
<p class="clearfix"><?php previous_posts_link("<< 查看新文章", 0); ?> <span class="float right"><?php next_posts_link("查看旧文章 >>", 0); ?></span></p>
<?php else : ?>
<h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
<p>没有找到任何文章！</p>
<?php endif; ?>
</div>
<?php
/*
have_posts();       判断是否有下一个文章
the_post();         改变当前文章指向到下一个文章文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

the_permalink();    当前指向文章的连接地址
the_title();        当前指向文章的标题
the_tags("标签："); 当前指向文章的标签
comments_popup_link("0 条评论", "1 条评论", "% 条评论", "", "评论已关闭");    显示打印当前指向文章的评论链接
edit_post_link("编辑", " • ", "");    当前指向文章，显示打印当前指向文章的编辑链接
the_excerpt();                 当前指向文章，只要在写文章的时候在"摘要"框内填写摘要，在首页显示的就是摘要，如果不填就输出全文！
the_content("阅读全文...");    用于输出当前指向文章全文，除非在文章中使用了
the_permalink();              返回当前指向文章阅读全文的连接地址
previous_posts_link("<< 查看新文章", 0); 显示打印当前显示列表分页连接(每页文章数量取决于在后台设置每页可显示的文章数量)
next_posts_link("查看旧文章 >>", 0);      显示打印当前显示列表分页连接
the_time("Y年n月j日");显示日期如 1999年5月1日文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

另外，还有个存档页面的模板，跟的制作过程完全一样，只不过需要在里添加一个函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

单文章页，可以根据页往这里添加自己想要显示的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

也就是页面，博客上的所有网页都是页面，这里指的页面一个单独的页面，如"关于"、"联系方式"等，可以在WordPress后台 – 页面，进行页面的添加修改等。
可根据之前函数添加本页内容
*/
while (have_posts()) :
the_post(); update_post_caches($posts);
endwhile;
/*
update_post_caches($posts); 该函数重置文章缓存且未被记录。仅在页面的第一次循环检索到文章子集时，第二次循环可执行基本循环。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

常用函数
get_avatar($comment, 48);       获取评论者的gravatar头像，尺寸为48 * 48
comment_reply_link()                 回复留言的链接
get_comment_time("Y-m-d H:i");       获取评论发布时间
edit_comment_link("修改");           管理员修改评论的链接
comment_text()                       输出评论内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

is_user_logged_in()                  判断用户是否登录
wp_login_url( get_permalink() );     博客登录地址
get_comment_author_link()            用于获取评论者博客地址
$comment_author                      读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写用户名
$comment_author_email                读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写Email
$comment_author_url                  读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写博客地址
do_action(‘comment_form", $post->ID) 该函数为某些插件预留
wp_logout_url(get_permalink())       退出登录的链接
*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

/*
创建模板文件
*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

/*
Template Name: 自建模板
*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

/*
模板文件中添加如上注释代码，模板文件名任意，在新建页面时模板选择即可显示自建模板来使用此模板
可添加想要的模板样式及页面内容,新建页面时只填标题不写内容，相当创建一个页面链接地址，新建页面存在数据前缀_posts 表中
获取到页面地址后，在写地址时可在后添加参数，则转到该页时可通过$_GET,$_POST接收
可以单独建一个表存储地址，及所属页面类型，及各页面子父级关系，在插件中进行控制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

wordpress固定链接
如果修改wordpress固定链接不好用，在apache配置文件中打开选项
#LoadModule rewrite_module modules/
把前面 # 去掉，并把所有 AllowOverride None 改成 AllowOverride all
如果不是Apache服务器，而是用的IIS调试的话，那就得去安装一个“”筛选器，然后在站点设置里面将PHP置为优先级。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

创建小工具
在主题目录下新建自定义文件文件名任意，内容任意
然后在中添加如下代码
*/
register_sidebar_widget ( "我的小工具", "mytool_fun" ); // "我的小工具"为后台显示小工具名称，mytool_fun为引入自建小工具页面内容的方法名
function mytool_fun() {
include (TEMPLATEPATH . "/");
}
/*
在后台小工具中即可看到自定义的小工具，添加后，前台页面即可看到自建小工具页面的内容
*/
?>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/12507.html

wordpress主题制作的具体实现步骤

WordPress 6.5 发布，体验进一步加强，性能也大幅提升

WordPress 6.5 通过新翻译格式文件显著提高加载速度

WordPress 6.5 新功能大全：字体库、数据视图、块绑定、交互 API

WordPress 6.5 性能提升，将支持 AVIF 格式图片

WordPress二次开发：添加字段到自定义分类法Taxonomy Terms

Vercel+Cloudfare：个人打造AI网站神器

WordPress 6.5 新功能：字体库、新增API、插件依赖

AI写作宝、聪明灵犀、文心一言…AI英语写作4个工具

2024年用WORDPRESS搭建一个独立网站需要多少钱？

WordPress搭建外贸独立网站后台操作2000字保姆级教程

Comment