Advanced Theme Development With Bootstrap

Local Wp 开发

Vscode

WP项目结构：

wp-admin、wp-includes、wp-content三个文件夹
主要开发主题区域位于 wp-content文件夹下theme里面，theme当中有两个必要的文件，分别为
style.css和index.php。
一般来说，一个完整的主题文件会包括
header.php、footer.php、index.php、home.php、archive.php、page.php、single.php、search.php、author.php、404.php、sidebar.php

style.css、functions.php、comments.php

重要文件属性介绍

style.css重要属性：
Theme Name:
Theme URI:
Author:
Author URI:
Description:
Version:

screenshot.png ( 1200*900 px)

index.php整理

>

<?php wp_head(); ?>

<?php wp_footer(); ?>

function.php撰写

<?php
function wpdevs_load_scripts(){

 wp_enqueue_style('wpdevs-style',get_stylesheet_uri(),array(),filemtime(get_template_directory().'/style.css','all');
 wp_enqueue_style('google-fonts','',arry(),null);
 wp_enqueue_script('dropdown',get_template_directory_uri().'/js/dropdown.js',arrray(),'1.0'，true);

}
add_action('wp_enqueue_scripts','wpdevs_load_scripts');
?>
备注：filemtime(get_template_directory().'/style.css')这个最好在本地开发时使用，正式上线时，要改回1.0这样的版本号

注册菜单

①wp后台建页面
② register_nav_menu(array(

 'wp_devs_main_menu'  => 'Main Menu'
 'wp_devs_foot_menu'  => 'Footer Menu'

))
③调用菜单

④响应式设置（移动端菜单设置）

Blog页面创建及Wordpress循环

两种创建方式:
①单页创建，首先在后台创建页面，然后在源码文件夹下创建page-{slug}.php
②模板创建，视频案例中创建为general-template.php,到时候可以试试，blog-template.php等等

Add_theme_support 主题支持函数

接上面function.php函数修改，
function wpdevs_config(){

register_nav_menu(
array(
 'wp_devs_main_menu'  => 'Main Menu'
 'wp_devs_foot_menu'  => 'Footer Menu'
)

)

$args = array(

 'height' -> 225,
 'weight' -> 1920

);
add_theme_support('custom-header', $args);
add_theme_support('post-thumbnails');
add_theme_support('custom-logo',array(

        'width'->200,
        'height'->100,
        'flex-width'->true,
        'flex-height'->true
        )

)
}
add_action('after_setup_theme','wpdevs_config',0);//0代表处理函数优先级，最先处理

调用header主题图片，代码：

调用主题略缩图函数 <?php the_post_thumbnail(thumb/meduim/large/full/array(275,380))；?>
调整略缩图大小尺寸 setting下去找

调用logo图片 <?php the_custom_logo();>

Sidebar侧边栏开发

add_action('widgets_int','wpdevs_sidebars');
function wpdevs_sidebars(){
register_sidebar(

 array(
    'name' => 'Blog Sidebar',
    'id' =>'sidebar-blog',
    'description' =>'This is the Blog Sidebar.You can add your widget here.',
     'before_widget' => '<div class ="widget-wrapper">',
     'after_widget' => '</div>',
     'before_title' => '<h4 class ="widget-title">'
     'after_title'  => '</h4>'
     
 )

);
}

注册新php文件，sidebar.php
<?php if(is_active_sidebar('sidebar-blog')): ?>

<aside class = "sidebar">
   <?php dynamic_sidebar('sidebar-blog'); ?>
<aside/>

<?php endif;

调用sidebar侧边栏，<?php get_sidebar();>

调用侧边栏后，去wordpress后台找widgets
然后设置小部件

WP Query查询类

添加链接 permalink

<?php the_permalink();?>

single.php

<?php get_header() ?>

<?php get_footer() ?>

搜索

直接调用函数
<?php get_search_form(); ?>

创建文件，search.php

Theme Customizer

页脚版权信息

wp-devs文件夹下建立一个inc文件夹
创建一个customizer.php
下一步，在functions.php中，头顶写一段
require get_template_directory_uri().'/inc/customizer.php';

写在 customizer.php
<?php
function wpdevs_customize($wp_customize){

// 1 Coryright Section
$wp_customize -> add_section(
   'sec_copyright',
   array(
   'title' => 'Copyright Settings',
   'description' => 'Copyright Settings'
   )
);
$wp_customize -> add_setting(

)

}