Muốn làm được wordpres đầu tiên cần biết 1 chút kiếm thức về lập trình php. Cài đặt môi trường chạy wordpress trên localhost cần cài đặt môi trường , ở đây mình quen dùng docker nhé Tạo file docker-compose.yml với nội dung chạy docker để tạo localhost với lệnh docker-
Muốn làm được wordpres đầu tiên cần biết 1 chút kiếm thức về lập trình php.
Cài đặt môi trường chạy wordpress trên localhost cần cài đặt môi trường , ở đây mình quen dùng docker nhé
Tạo file docker-compose.yml với nội dung
version: '3'
services:
db_blog:
image: mysql:latest
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: 12345678Aa@
MYSQL_DATABASE: databasename
MYSQL_USER: admin
MYSQL_PASSWORD: 12345678Aa@
networks:
- wpsite
wordpress:
depends_on:
- db_blog
image: wordpress:latest
ports:
- '5000:80'
restart: always
volumes: ['./:/var/www/html']
environment:
WORDPRESS_DB_HOST: db_blog:3306
WORDPRESS_DB_USER: root
WORDPRESS_DB_PASSWORD: 12345678Aa@
WORDPRESS_DB_NAME: databasename
networks:
- wpsite
networks:
wpsite:
volumes:
db_data:
chạy docker để tạo localhost với lệnh docker-compose up -d
Chạy local với http://localhost:5000 và cài đặt theo hướng dẫn
Sửa trên thêm theme twenty-twenty-one nhé
Sửa tên site bằng cách sửa file ctyle.css
@charset "UTF-8";
/*
Theme Name: Tên Themes ở đây
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domain
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
Sửa 2 thông số Theme Name và Text Domain
File header.php là header của trang
Ví dụ code header.php mẫu
" /> /assets/css/style.css">
>
// menu
get_template_directory_uri() là để gọi đường đẫn gốc
Trang footer.php
// code footer
Trang chủ sẽ cần sửa file index.php bạn cần thêm html vào đó
ví dụ về index.php
$page_size, 'order' => 'DESC', 'orderby' => 'post_date', 'paged' => $page);
$postslist = new WP_Query($args);
$total = $postslist->found_posts;
$postslist = $postslist->posts;
// cái này lấy các bài viết mới nhất nhé
?>
ID, 'medium'); $href = get_the_permalink(); $title = get_the_title(); $description = get_the_excerpt(); ?> // hiển thị dữ liệu item ở đây
Trang tìm kiếm code nằm ở file search.php nhé
$page_size, 's'=>$s, 'order' => 'DESC', 'orderby' => 'post_date', 'paged' => $page, 'post_type'=>'post');
$postslist = new WP_Query($args);
$total = $postslist->found_posts;
$postslist = $postslist->posts;
?>
Kết quả tìm kiếm từ khoá:
ID, 'medium'); $href = get_the_permalink(); $title = get_the_title(); $description = get_the_excerpt(); ?> // hiển thị dữ liệu item ở đây
Điều view vào trang chi tiết ta sửa lại code trong file single.php
Nội dung bài chi tiết sẽ nằm trong path: template-parts/content/content-single.php
content-single.php sửa cơ bản như
Điều hướng các trang danh mục , thẻ tag ta sửa file archive.php
chuyên mục với thẻ tag sẽ nằm trong file: template-parts/content/category.php
taxonomy === 'category' ? 'category' : 'tags';
if($type !== 'category') {
$args = array('posts_per_page' => $page_size, 'order' => 'DESC', 'orderby' => 'post_date', 'paged' => $page, 'tag_id' => $tag_info->term_id);
}else{
$args = array('posts_per_page' => $page_size, 'order' => 'DESC', 'orderby' => 'post_date', 'paged' => $page, 'cat' => $tag_info->term_id);
}
$postslist = new WP_Query($args);
$total = $postslist->found_posts;
$total = intval($total);
$title = $type === 'category' ? 'Danh mục' : 'Thẻ Tags'
?>
: name; ?>
have_posts()) : $postslist->the_post(); $thumbnail = get_the_post_thumbnail_url($post->ID, 'medium'); ?> // show nội dung item bài thuộc chuyên mục , thẻ tag ở đây
muốn sửa html phần comment thì sửa file comments.php
cái phần hiển thị phần comment này trong cái chi tiết bài viết ta sửa file content-single.php thêm
Sửa html khi không tìm thấy trang ở file 404.php
Nếu muốn custom 1 page html thì làm như sau tạo 1 file ví dụ như contact.php trong folder template-parts nội dung của contact.php cơ bản như
// nội dung điền tiếp vào đây title gọi hàm get_the_title(); content gọi get_the_content();
Các hàm load chung viết vào file function.php nhé
ví dụ về làm cái hàm load menu trong functions.php
// tạo menu
function create_bootstrap_menu( $theme_location ) {
if ( ($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location]) ) {
$menu = get_term( $locations[$theme_location], 'nav_menu' );
$menu_items = wp_get_nav_menu_items($menu->term_id);
global $wp;
$current_url = add_query_arg( '', '', home_url( $wp->request ) ).'/';
$menu_list = '';
foreach( $menu_items as $menu_item ) {
if( $menu_item->menu_item_parent == 0 ) {
$parent = $menu_item->ID;
$menu_array = array();
foreach( $menu_items as $submenu ) {
if( $submenu->menu_item_parent == $parent ) {
$bool = true;
$class = $current_url == $submenu->url ? 'nav-link active': 'nav-link';
$menu_array[] = '
' ."\n"; } } if( $bool == true && count($menu_array ) > 0 ) { $class = $current_url == $menu_item->url ? 'nav-link active': 'nav-link'; $menu_list .= '' ."\n"; } } else { $menu_list = ''; } echo $menu_list; } // end tạo menuTrong functions.php có sẵn 2 cái menu ở cái hàm này rồiregister_nav_menus( array( 'primary' => esc_html__( 'Menu chính', 'twentytwentyone' ), 'footer' => esc_html__( 'Menu chân trang', 'twentytwentyone' ), ) );Muốn hiển thị menu ở đâu thì gọi hàm create_bootstrap_menu ở chỗ đóLink code mẫu tại đây repo