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

2024-12-04 00:26:09

代码如下:

<?php
/*
在根目录 -> wp-content -> themes 下创建mytheme文件夹用来存放创建新主题模板

在mytheme目录下创建 index.php ，style.css 两个文件，在wp后台外观->主题中就可以看到刚创建的主题

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

找一个300*225的png图片，命名为 screenshot.png 放在主题目录下（mytheme文件夹中），在主题管理页中即可看到新建主题的预览图片

//==================================================header================================================================
可以把网站相同头内容放在一个头文件中，在主题目录下新建 header.php 文件向其中输入输入统一的头部内容
在 index.php 或想调用该header.php页面的页面中输入
*/

get_header(); //get_header()就相当于将header.php中的代码拷贝到当前的php文件

/*
在主题管理页面，该主题实时预览中，默认打开的 index.php 页面中即可引入 header.php 页面的内容
header.php 将会被所有的模板页面（主页、分类页、页面、标签页等）所包含，所以 header.php 中代码应该是动态的。
不同页面的title都是不一样，而且title的设置还会直接影响到SEO的效果，所以这里应该谨慎设置。下面提供一种SEO优化的title写法，
在header.php页面添加
*/
?>
<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
在 header.php 页面中添加默认 style.css 文件
*/
?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php
/*
bloginfo('stylesheet_url');返回的是主题默认style.css文件绝对网址路径，如
http://localhost/wordpress/wp-content/themes/myTheme/style.css
bloginfo('template_url');返回的是主题目录的绝对网址路径，可以用来模板中连接样式图片，如
http://localhost/wordpress/wp-content/themes/mytheme
添加 pingback 通告功能，在header.php页面 <head> 标签中里面添加代码：
*/
?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
/*
添加订阅feed链接，在header.php页面 <head> 标签中添加：
*/
?>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />
<?php
/*
添加wp_head，有些插件需要在网页头部添加一些js或css，要让这些插件能够正常的工作，也让主题有更好的兼容性，应该添加wp_head()函数
header.php 页面 <head> 标签中添加
*/
?>

<?php wp_head(); //用于包含WordPress程序输出头部信息 ?>

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

<?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; ?>

<?php
    if (! function_exists ( 'dynamic_sidebar' ) || ! dynamic_sidebar ( 'Third_sidebar' )) :
    ?>
    <h4>标签云</h4>
    <p><?php wp_tag_cloud('smallest=8&largest=22'); ?></p>
    <?php endif; ?>

<?php
    if (! function_exists ( 'dynamic_sidebar' ) || ! dynamic_sidebar ( 'Fourth_sidebar' )) :
    ?>
    <h4>文章存档</h4>
    <ul>
    <?php wp_get_archives('limit=10'); ?>
    </ul>
    <?php endif; ?>
</div>
<?php
/*
同时在主题目录下创建 functions.php 文件内容为
*/
/** widgets */
if( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'First_sidebar', //name就是给widget指定各自的名称,以便在sidebar.php中分别调用.所以只需要给这两个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后台 -> 外观 -> 小工具，就可以正常地拖动小工具到侧边栏了

制作index.php 文章列表
例子
*/
?>
<div class="grid_8">
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post">
        
        <h3 class="title"><a href="<?php the_permalink(); ?>" 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" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />
        
        <?php //the_excerpt(); ?>
        <?php the_content('阅读全文...'); ?>
        
        <p class="clearfix"><a href="<?php the_permalink(); ?>" 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();         改变当前文章指向到下一个文章

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日

另外，还有个存档页面的模板archive.php，跟index.php的制作过程完全一样，只不过需要在functions.php里添加一个函数

单文章页single.php，可以根据index.php页往这里添加自己想要显示的内容

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

常用函数
get_avatar($comment, 48);       获取评论者的gravatar头像，尺寸为48 * 48
comment_reply_link()                 回复留言的链接
get_comment_time('Y-m-d H:i');       获取评论发布时间
edit_comment_link('修改');           管理员修改评论的链接
comment_text()                       输出评论内容

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())       退出登录的链接
*/

/*
创建模板文件
*/

/*
Template Name: 自建模板
*/

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

wordpress固定链接
如果修改wordpress固定链接不好用，在apache配置文件 httpd.conf 中打开选项
#LoadModule rewrite_module modules/mod_rewrite.so
把前面 # 去掉，并把所有 AllowOverride None 改成 AllowOverride all
如果不是Apache服务器，而是用的IIS调试的话，那就得去安装一个“ISAPI_Rewrite3_0069_Lite.msi”筛选器，然后在站点设置里面将PHP置为优先级。

创建小工具
在主题目录下新建自定义文件 mytool.php 文件名任意，内容任意
然后在 functions.php 中添加如下代码
*/
register_sidebar_widget ( "我的小工具", "mytool_fun" ); // "我的小工具"为后台显示小工具名称，mytool_fun为引入自建小工具页面内容的方法名
function mytool_fun() {
include (TEMPLATEPATH . "/mytool.php");
}
/*
在后台小工具中即可看到自定义的小工具，添加后，前台页面即可看到自建小工具页面的内容
*/
?>

WordPress的主题编写中获取头部模板和底部模板

get_header()(获取头部) 引入主题的头部模板,默认会引入当前主题目录里的 header.php 文件.如果指定了一个名称,则引入当前主题目录的 header-{name}.php 文件,如果需要引入的文件不存在则引入 wp-includes/theme-compat/header.php 文件. 用法 get_header( $name ); 参数 $name (字符串)(可选)要引入的文件的名称,如果指定则引入 header-{$name}.php 文件. 例子 <?php get
WordPress主题制作之模板文件的引入方法

get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 get_footer(),只不过这个 get_template_part() 可以引入自定义名字的文件. 使用方法 get_template_part( $slug, $name ); 参数 $slug (字符串)(必须)要引入的模板的文件名,不包括后缀名 .php,也就是如果需要引入当前主题根目录的 loop.php 文件 $slug 填写 "loop" 即可.
WordPress主题中添加文章列表页页码导航的PHP代码实例

WordPress 默认给主题开发者的建议是在文章列表底部提供上下页按钮,所以没有提供直接用在文章列表下的分页导航的函数.这里我提供一个比较完善的分页导航函数. /** *WordPress 文章列表分页导航 *http://www.endskin.com/page-navi/ */ function Bing_get_pagenavi( $query = false, $num = false, $before = '<article class="pagenavi postlistpa
WordPress主题制作中自定义头部的相关PHP函数解析

header_image() header_image() 函数是 WordPress 自定顶部图像的标准接口函数,该函数可以自动判断后台设置,并返回字符串形式的用户自定义顶部图像地址.本文主要涉及该函数的详解及使用. [Display header image path.] 即,显示顶部图像地址. 使用复制代码代码如下: <img src="<?php header_image(); ?>" width="<?php echo $header_i
WordPress中使主题支持小工具以及添加插件启用函数

让主题支持小工具 WordPress 的小工具(widget)是一大特色,它让用户自由拖动组合内容,而且任何插件和主题都可以添加一个额外的小工具,增加扩展性. 默认情况下,一个主题并不会支持小工具,需要主题开发者启用小工具功能并把小工具在相应的前台位置调用出来,这样用户才能在后台直接拖动生成侧边栏. 本文就来教你如何激活小工具功能,并且添加一个侧边栏,最后在前台显示出来. 注册侧边栏默认的,后台外观下是没有 "小工具" 这个菜单按钮的,如果想要让他出现,就至少需要注册一个侧边栏,否则
编写PHP脚本使WordPress的主题支持Widget侧边栏

帮网友小改了一下主题. 任务比较简单, 只是为一个三栏主题添加对 Widget 的支持而已,就先从这次简单的案例开始说吧. 单侧边栏 functions.php <?php if( function_exists('register_sidebar') ) { register_sidebar(array( 'before_widget' => '<li class="widget">', // widget 的开始标签 'after_widget' =>
wordpress主题支持自定义菜单及修改css样式实现方法

自己在制作wordpress主题的时候遇到这个问题,并且遇到了css样式错误,其实很简单,操作如下: 在主题中functions.php中加入: register_nav_menus( array( 'menu' => __( 'menu', '' ), ) ); 在主题导航栏贴上导航代码: <?php wp_nav_menu( 'id=navbar' ); ?> 但是出现了css样式错误: 原来这个函数输出的是下面的格式: 复制代码代码如下: <div id="men
实现WordPress主题侧边栏切换功能的PHP脚本详解

作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求. 可能一些朋友曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而烦恼过. 下面我们以 Classic 主题为例, 谈谈如何在主题中方便地切换单侧边栏和双侧边栏. 最后我会提供修改后的主题. 添加管理选项后台处理首先, 我们要修改 function.php, 主要的处理工作都在这个文件里面, 如果主题没有这个文件, 就创建一个吧. (没有 function.php 说明主题不支持 Wi
基于wordpress主题制作的具体实现步骤

复制代码代码如下: <?php/*在根目录 -> wp-content -> themes 下创建mytheme文件夹用来存放创建新主题模板在mytheme目录下创建 index.php ,style.css 两个文件,在wp后台外观->主题中就可以看到刚创建的主题打开style.css文件输入*/?>/*Theme Name: 这里填主题名称Theme URI: 这里填主题介绍的网址,没有就填你的博客网址吧Description:这里填主题的简短介绍Author:
六个步骤，从零开始教你搭建基于WordPress的个人博客

目录摘要:WordPress是使用PHP语言开发的博客平台,是免费开源的.用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站,也可以把WordPress当作一个内容管理系统(CMS)来使用. 一.购买云服务器和域名可以参考以下博客进行购买,以华为云为例,服务商可以自选.如果已有云服务器和域名,直接进行第二步操作. ▶ 云服务器和域名的购买-华为云二.远程连接云服务器可以参考以下博客进行远程连接服务器,也可以用其他办法连接.连接以后进行第三步操作. ▶ Xftp和Xshel
基于node.js制作简单爬虫教程

前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishujia.com/webapp/build/html/ 网站的所有门店发型师的基本信息. 思路:访问上述网站,通过chrome浏览器的network对网页内容分析,找到获取各个门店发型师的接口,对参数及返回数据进行分析,遍历所有门店的所有发型师,直到遍历完毕,同事将信息存储到本地. 步骤一:安装nod
基于wordpress的ajax写法详解

想针对一个wordpress的模板程序进行更改,想到ajax的方便,就研究了一下. 以下是使用方法和代码: js页面如下 <script> var ajaxurl = '<?php echo admin_url('admin-ajax.php')?>'; function getVideo(id){ //必须使用以下里面才能正常使用jquery jQuery(document).ready(function($){ var data={ tape:id, //这里尤为重要,acti
基于C++ OpenCV制作电子相册查看器

目录前言一.图片读取二.图片展示三.键盘控制四.效果显示五.源码总结前言本文将使用OpenCV C++ 制作电子相册查看器.类似于win10系统的“照片”功能.接下来就具体来看看是如何一步步的实现吧. 一.图片读取我们想要一张张的查看文件夹下的图片,第一步就得读取将该文件夹下的所有图片. 如上图所示,为我创建的文件夹,该文件夹下有14张图片.接下来我们就编写代码读取该文件夹下的所有图片.将读取到的图片存储在images容器. //读取文件夹下所有图片 string filen
Docker中Dockerfile制作镜像的方法步骤

目录 1.基于容器制作 2. 基于Dockerfile制作镜像 2.1 Dockerfile命令 2.2 简单示例 docker 镜像的制作,可以基于容器创建镜像,也可基于 dockerfile 构建镜像.但需要注意的是,我们并不是真正"创建"新镜像,而是基于一个已有的基础镜像,如 centos 或 ubuntu 等,构建新镜像而已. 1.基于容器制作联合文件系统(UnionFS)挂载提供了容器的文件系统,任何对容器内文件系统的改动都会被写入到新的文件层中,这个文件层归创建它的容器所
基于Three.js制作一个3D中国地图

目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

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

相关推荐

随机推荐