分类： 编程

Posted on

创建一个优秀WordPress主题 教程笔记

Create a Premium WordPress Theme

https://www.youtube.com/playlist?list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX

代码：

originhttps://github.com/wmdzkey/wordpress.git

part 1 – 图标字体生成网站icomoon.io; 主题信息文件style.css,index.php; 主题截图文件1200*900.png 2021-6-2 18:07

part 2 – 分离功能文件functions.php;添加自定义菜单add_action(admin_menu) ->{add_menu_page}; 2021-6-2 19:07

part 3 – 后台左侧菜单与子菜单的绑定 2021-6-7 16:54

part 4 – 后台在管理页面中创建表单字段及存储 2021-6-11 17:16

part 5 – 后台管理页创建更多自定义字段并加入字符过滤函数 2021-6-14 11:44

part 6 – 后台管理页引入css到限定页面 2021-6-15 16:47

part 7 – 后台管理页引入js到表单页面 并加入上传图片文件 2022-5-19 15:23

part 8 – 新增后台主题支持文章格式 并整理代码 2022-5-19 18:11

part 9 – 完善头像替换/移除功能 加入自定义页眉和背景图片开关 2022-5-19 18:59

part 10 – 新增联系人表单开关 自定义联系人表单记录菜单 2022-5-20 12:02

part 11 – 新增联系人表单 内容 邮箱 字段 2022-5-20 15:31

part 12 – 添加自定义元数据email字段并保存 2022-5-23 17:55

part 13 – 初步加入自定义css功能 引入ace组件 2022-5-24 10:26

part 14 – 建立前端基本目录结构 引入bootstrap 2022-5-24 11:58

part 15 – 建立前端页眉部分 2022-5-24 18:06

part 15 – 补充完成水平垂直居中 2022-5-24 19:12

part 15 – 去除暂时无法引入的tailwind.css 2022-5-25 11:39

part 16 – 加入去除js/css默认wp版本号 并加入sass实时编译 2022-5-25 15:22

part 16 – 补充sass文件 2022-5-25 15:23

part 17 – 初步创建顶部导航菜单 2022-5-25 16:52

part 18 – 美化顶部导航菜单 替换带有popper版本的bootstrap 2022-5-27 11:34

part 19 – 开启缩略图字段 新增标准文章前端展示 2022-5-31 12:30

part 20 – 显示标签数和评论数 引入阿里图标 2022-5-31 13:36

part 21 – 拆分scss到不同的base下子文件，完成标准类型的日志文件列表展示版式 2022-6-2 11:29

part 22 – 完成图片类型的日志文件列表展示版式 2022-6-6 15:18

part 23 – 完成音频类型的日志文件列表展示版式 2022-6-6 19:04

part 24 – 完成视频类型的日志文件列表展示版式 2022-6-7 15:51

part 25-27 – 完成画廊(相册)类型的日志文件列表展示版式 2022-6-9 15:35

part 28-29 – 完成引用和链接类型的日志文件列表展示版式 并修复相册类型文章的小图预览初始不加载和显示不全BUG 2022-6-10 13:16

part 30 – 完成日志类型的日志文件列表展示版式 2022-6-10 16:24

part 31-35 – 完成点击更多加载之前之后的Ajax请求日志列表展示版式 并加入无状态变更url地址模式控制返回页面定位 通过滚动事件自动监听当前显示页面元素进而改变url 2022-6-13 19:01

part 36-38 – 完成归档页日志列表展示版式 包括分类、标签、作者 并修复底部显示BUG 2022-6-14 14:27

part 39-40 – 完成单篇文章的展示版式 2022-6-15 13:10

part 41 – 完成自定义短代码功能 2022-6-15 15:44

part 41 – 补充修复tooltip的js激活方法 2022-6-15 16:40

part 42 – 完成popover短代码 文章底部导航按钮(上一篇、下一篇) 2022-6-16 11:20

part 43 – 完成分享区域内容功能 2022-6-16 17:22

part 44-46 – 完成评论区域功能 2022-6-17 13:17

part 47-51 – 完成侧边栏区域功能并加入自定义个人介绍小工具 2022-6-20 13:07

part 47-51 – 补充修复侧边栏区域样式问题 2022-6-20 13:13

part 52-55 – 完成侧边栏区域热门文章小工具 2022-6-20 16:44

part 56-62 – 完成联系我页面功能实现 关联开始建立的自定义post类型联系表单记录 并加入区分xs模式下的导航显示 移动端显示在sidebar中 2022-6-21 16:45

part 63-65 – 完成适配移动端页面 主题开发结束 Definitely Happy Coding! 2022-6-21 18:53

Posted on

WordPress 101 主题开发教程: 18 – 创建自定义文章类型Part1

WordPress 101 – Part 18: How to create Custom Post Type – Part 1

视频学习参考：https://www.youtube.com/watch?v=vSM7w3zzlSU&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=18

1.在functions.php中加入

/**
 * 自定义文章类型
 */
function themes_custom_post_type() {
    $labels = array(
        'name' => 'Portfolio',
        'singular_name' => 'Portfolio',
        'add_new' => 'Add Portfolio Item',
        'all_items' => 'All Items',
        'add_new_item' => 'Add Item',
        'edit_item' => 'Edit Item',
        'new_item' => 'New Item',
        'view_item' => 'View Item',
        'search_item' => 'Search Portfolio',
        'not_found' => 'No Items Found',
        'not_found_in_trash' => 'No Items Found In Trash',
        'parent_item_colon' => 'Parent Item',
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'publicly_queryable' => true,
        'query_var' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'thumbnail',
            'revisions',
        ),
        'taxonomies' => array(
            'category',
            'post_tag',
        ),
        'menu_position' => 5,
        'exclude_from_search' => false,
    );
    register_post_type('portfolio', $args);
}
add_filter('init', 'themes_custom_post_type');

Happy coding!

Posted on

WordPress 101 主题开发教程: 17 – 创建自定义归档页和404页面

WordPress 101 – Part 17: How to create a custom Archive and 404 page

视频学习参考：https://www.youtube.com/watch?v=5NdoDjukAVQ&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=17

1.归档页archive.php

the_archive_title( '<h1 class="page-title">前', '后</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );

2.404.php

<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyseventeen' ); ?></p>

<?php get_search_form(); ?>

               <?php the_widget('WP_Widget_Recent_Posts'); ?>
Posted on

WordPress 101 主题开发教程: 16 – 如何打印部L格信息

WordPress 101 – Part 16: How to print the Blog Info

学习视频参考：https://www.youtube.com/watch?v=wGJ0AgceWS4&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=16

1.通过bloginfo函数显示站点名称

<?php bloginfo(‘name’); ?>

2.去除Wordpress版本号显示

/**
 * 去除Wordpress版本号显示
 */
function remove_wp_version() {
    return '';//传值也不显示 <meta name="generator" content="WordPress 5.2.9">
}
add_filter('the_generator', 'remove_wp_version');

Posted on

WordPress 101 主题开发教程: 15 – 通过WalkerClass编辑菜单 Part 2

WordPress 101 – Part 15: Edit the menu with the Walker Class – Part 2

视频学习参考： https://www.youtube.com/watch?v=bTp3Pt_RQmA&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=15

1.apply_filters 过滤器

function test_func(){
    return '修改值';
}
add_filter( 'test', 'test_func' );
echo apply_filters( 'test', '可以被修改的值' );

2. start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { … }

好麻烦啊 这个方法应该应用不广泛吧 好难写！

Everything is wonderful and beautiful!

Posted on

WordPress 101 主题开发教程: 14 – 通过WalkerClass编辑菜单

WordPress 101 – Part 14: Edit the menu with the Walker Class – Part 1

视频学习参考：https://www.youtube.com/watch?v=ArEmwJV6M7s&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=14

WalkerClass 真是之前没有发现的宝藏

通过这个类的子类Walker_Nav_menu 来实现

结构在主题根目录建立Inc文件夹

建立文件walker.php

在functions.php中编写 require get_template_directory() . ‘inc/walker.php’;

在walker.php中编写构建菜单的类