สร้าง Theme ให้กับ WordPress (2)
11 ก.ย. 2017 , 4,454 Views , หมวดหมู่ WordPress ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:wordpress themeปรับแต่งธีมของเราในไฟล์ functions.php
สามารถใช้ตัวช่วย Generate โค๊ดได้ตามลิ้งค์นี้ครับ https://generatewp.com/
add_theme_support( string $feature )
กำหนดว่าธีมของเรามีคุณสมบัติอะไรบ้าง เช่น ปรับแต่งสีพื้นหลัง,ปรับแต่ง logo ,… เป็นต้น
ตัวช่วยในการ Generator add_theme_support ตามลิ้งค์นี้ครับ https://generatewp.com/theme-support/
ดูเพิ่มเติม https://developer.wordpress.org/reference/functions/add_theme_support/
การเพิ่ม Menus
|
1 2 3 4 5 6 7 8 9 |
function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); |
ตัวอย่างเมนูในไฟล์ header.php
|
1 2 3 4 5 6 7 8 9 |
<nav id="site-navigation" class="main-navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'seenual' ); ?></button> <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_id' => 'primary-menu', ) ); ?> </nav><!-- #site-navigation --> |
ตัวช่วย Generate Menu https://generatewp.com/nav-menus/
ดูเพิ่มเติม https://developer.wordpress.org/themes/functionality/navigation-menus/ , https://developer.wordpress.org/reference/functions/wp_nav_menu/
การ Add CSS Stylesและ JS Script
โดยใช้ wp_enqueue_script ตัวอย่างโค๊ด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Enqueue scripts and styles. */ function seenual_scripts() { wp_enqueue_style( 'seenual-style', get_stylesheet_uri() ); wp_enqueue_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_script('popper.min', get_template_directory_uri() . '/js/popper.min.js', array(),false,true); wp_enqueue_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery',false,true); } add_action( 'wp_enqueue_scripts', 'seenual_scripts' ); |
ตัวช่วยในการ Register Scripts https://generatewp.com/register_script/
ตัวช่วยในการ Register Styles https://generatewp.com/register_style/
ดูเพิ่มเติม https://developer.wordpress.org/reference/functions/wp_enqueue_script/
การสร้าง Sidebars Widget
ตัวอย่างการสร้าง Sidebars
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** * Register widget area. * * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar */ function seenual_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Sidebar', 'seenual' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here.', 'seenual' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => esc_html__( 'Secondary Sidebar', 'seenual' ), 'id' => 'sidebar-2', 'description' => esc_html__( 'Add widgets here.', 'seenual' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'seenual_widgets_init' ); |
ตัวช่วย Generate Sidebar https://generatewp.com/sidebar/
ดูเพิ่มเติม https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
ในไฟล์ sidebar.php ก็เขียนโค๊ดเพื่อแสดง slidebar ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php /** * The sidebar containing the main widget area * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package seenual */ if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <aside id="sidebar-1" class="widget-area"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside> <?php } ?> <?php if ( is_active_sidebar( 'sidebar-2' ) ) { ?> <aside id="sidebar-2" class="widget-area"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </aside> <?php } ?> |
การสร้าง Widget
ดูเพิ่มเติมตามลิ้งค์นี้ครับ https://developer.wordpress.org/themes/functionality/widgets/
ตัวอย่างไฟล์ Functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<?php /** * seenual functions and definitions * * @link https://developer.wordpress.org/themes/basics/theme-functions/ * * @package seenual */ if ( ! function_exists( 'seenual_setup' ) ) : /** * Sets up theme defaults and registers support for various WordPress features. * * Note that this function is hooked into the after_setup_theme hook, which * runs before the init hook. The init hook is too late for some features, such * as indicating support for post thumbnails. */ function seenual_setup() { /* * Make theme available for translation. * Translations can be filed in the /languages/ directory. * If you're building a theme based on seenual, use a find and replace * to change 'seenual' to the name of your theme in all the template files. */ load_theme_textdomain( 'seenual', get_template_directory() . '/languages' ); // Add default posts and comments RSS feed links to head. add_theme_support( 'automatic-feed-links' ); /* * Let WordPress manage the document title. * By adding theme support, we declare that this theme does not use a * hard-coded <title> tag in the document head, and expect WordPress to * provide it for us. */ add_theme_support( 'title-tag' ); /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'menu-1' => esc_html__( 'Primary', 'seenual' ), ) ); /* * Switch default core markup for search form, comment form, and comments * to output valid HTML5. */ add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', ) ); // Set up the WordPress core custom background feature. add_theme_support( 'custom-background', apply_filters( 'seenual_custom_background_args', array( 'default-color' => 'ffffff', 'default-image' => '', ) ) ); // Add theme support for selective refresh for widgets. add_theme_support( 'customize-selective-refresh-widgets' ); /** * Add support for core custom logo. * * @link https://codex.wordpress.org/Theme_Logo */ add_theme_support( 'custom-logo', array( 'height' => 250, 'width' => 250, 'flex-width' => true, 'flex-height' => true, ) ); } endif; add_action( 'after_setup_theme', 'seenual_setup' ); /** * Set the content width in pixels, based on the theme's design and stylesheet. * * Priority 0 to make it available to lower priority callbacks. * * @global int $content_width */ function seenual_content_width() { $GLOBALS['content_width'] = apply_filters( 'seenual_content_width', 640 ); } add_action( 'after_setup_theme', 'seenual_content_width', 0 ); /** * Register widget area. * * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar */ function seenual_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Sidebar', 'seenual' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here.', 'seenual' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'seenual_widgets_init' ); /** * Enqueue scripts and styles. */ function seenual_scripts() { wp_enqueue_style( 'seenual-style', get_stylesheet_uri() ); wp_enqueue_script( 'seenual-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true ); wp_enqueue_script( 'seenual-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'seenual_scripts' ); /** * Implement the Custom Header feature. */ require get_template_directory() . '/inc/custom-header.php'; /** * Custom template tags for this theme. */ require get_template_directory() . '/inc/template-tags.php'; /** * Functions which enhance the theme by hooking into WordPress. */ require get_template_directory() . '/inc/template-functions.php'; /** * Customizer additions. */ require get_template_directory() . '/inc/customizer.php'; /** * Load Jetpack compatibility file. */ if ( defined( 'JETPACK__VERSION' ) ) { require get_template_directory() . '/inc/jetpack.php'; } |
ดูการเขียนไฟล์ functions.php เพิ่มเติม https://developer.wordpress.org/themes/basics/theme-functions/
ดูการสร้างธีมเพิ่มเติมตามลิ้งค์นี้ https://developer.wordpress.org/themes/
ป้ายกำกับ:wordpress theme
