Hướng dẫn tạo theme WordPress từ Scratch

huong-dan-tao-theme-wordpress-min

Nếu bạn là người đã có kiến ​​thức cơ bản về HTML, CSS và JavaScript, việc tạo một chủ đề WordPress rất dễ dàng. Tuy nhiên nếu bạn là người mới làm quen với WordPress thì bài viết dưới đây IMO sẽ hướng dẫn tạo theme WordPress cho người mới bắt đầu.

Tại sao nên sử dụng WordPress?

huong-dan-tao-theme-wordpress-min
Hướng dẫn tạo theme WordPress

WordPress là hệ quản trị nội dung mã nguồn mở (CMS – Content Management System) được sử dụng rộng rãi trên thế giới. Hiện tại, hơn 40% trang web trên toàn thế giới sử dụng WordPress.

Trên thực tế, WordPress là một CMS rất linh hoạt và được tối ưu hóa. Do đó, những người làm việc với bất kỳ CMS nào khác như Joomla, Drupal, v.v. đôi khi có thể muốn từ bỏ WordPress. Đó là lý do tại sao bạn cũng có thể chọn nền tảng này để tạo các trang web độc đáo của riêng mình và xây dựng doanh nghiệp của mình một cách dễ dàng.

Đối với người mới bắt đầu, WordPress là nơi hoàn hảo để bắt đầu.

Tuy nhiên, nếu bạn vẫn chưa chắc chắn đâu là WordPress hay CMS mã nguồn mở tốt nhất, bạn có thể tham khảo hướng dẫn sau đây của IMO và đưa ra quyết định của mình.

[block_content id=”1534″]

Hướng dẫn tạo theme WordPress từ Scratch

Trong phần sau, IMO sẽ hướng dẫn bạn tạo theme WordPress theo 2 cách đơn giản và nhanh chóng.

Cách 1: Tạo theme WordPress từ đầu bằng mã hóa (thủ công)

Cách 2: Tạo theme WordPress với TemplateToaster (Automatic)

Bạn có thể tạo các tệp này bằng trình soạn thảo văn bản như Notepad. Dưới đây là các tệp bạn cần tạo để bắt đầu xây dựng chủ đề WordPress của riêng mình.

Các bước tạo theme WordPress từ Scratch bằng coding

Bước 1: tệp header.php

Bạn phải đặt mã này vào tệp header.php.

<html>

<head>

<title>Tutorial theme</title>

<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/jquery.js’; ?>”>

</script>

<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/jquery-ui.min.js’; ?>”>

</script>

<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri().’/js/bootstrap.js’; ?>”>

</script>

<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri().’/css/bootstrap.css’; ?>”>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

</head>

<body>

<div id=”ttr_header” class=”jumbotron”>

<h1>HEADER</h1>

</div>

<div class=”container”>

Tệp Header.php này chứa mã phần tiêu đề nơi tệp js và tệp kiểu được liên kết, nó hiển thị tiêu đề trang.

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

Dòng này được thêm vào sau tiêu đề và hướng dẫn WordPress tải xuống tệp style.css sẽ xử lý kiểu dáng của chủ đề.

Sau đây

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

là một chức năng biểu định kiểu WordPress thực sự.

<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri().’/css/bootstrap.css’; ?>”>

Ở đây IMO sử dụng Bootstrap, một trong những framework thiết kế web đáp ứng nổi tiếng nhất trên thế giới. Bootstrap cung cấp sẵn các tệp CSS để tạo kiểu cho trang web của bạn. Bạn có thể giữ tệp bootstrap.css trong thư mục theme/css của mình.

Sau đó, một “div” với lớp ttr_header được thêm vào và nó sẽ là vùng chứa chính của trang web. Bây giờ hãy tạo cho nó một lớp để bạn có thể sửa đổi nó thông qua tệp style.css.

Sau đó, thêm một nhãn HEADER đơn giản trong “div id” với lớp “ttr_header” sẽ được chỉ định sau trong lớp “jumbotron”.

Bước 2: tệp index.php

Tệp index.php chính sẽ chứa đoạn mã sau:

<?php get_header(); ?>

<div id=”ttr_main” class=”row”>

<div id=”ttr_content” class=”col-lg-8 col-sm-8 col-md-8 col-xs-12″>

<div class=”row”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”col-lg-6 col-sm-6 col-md-6 col-xs-12″>

<h1><?php the_title(); ?></h1>

<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>

<p><?php the_content(__(‘(more…)’)); ?></p>

</div>

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>

</div>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Đây là dòng mã đầu tiên từ tệp này:

<?php get_header(); ?>

Nó sẽ bao gồm tệp header.php và mã chứa nó nằm trên trang chủ.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”col-lg-6 col-sm-6 col-md-6 col-xs-12″>

<h1><?php the_title(); ?></h1>

<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>

<p><?php the_content(__(‘(more…)’)); ?></p>

</div>

<?php endwhile; else: ?>

Đoạn mã trên hiển thị nội dung chính của bài đăng bạn đã tạo thông qua quản trị viên WordPress.

Tiếp theo, thêm file sidebar.php như hình bên dưới:

<?php get_sidebar(); ?>

Trong tệp này, bạn có thể sẽ thấy các tin nhắn, lưu trữ, chi tiết liên hệ gần đây của mình, v.v.

Sau dòng này, một “div” trống được chèn vào để ngăn cách khu vực chính và thanh bên ở cuối trang.

Cuối cùng, thêm một dòng bổ sung như thế này:

<?php get_footer(); ?>

điều này có nghĩa là bao gồm tệp footer.php.

Bước 3: Tệp Sidebar.php

Trong sidebar.php thêm đoạn mã sau:

<div id=”ttr_sidebar” class=”col-lg-4 col-md-4 col-sm-4 col-xs-12″>

<h2 ><?php _e(‘Categories’); ?></h2>

<ul > <?php wp_list_cats(‘sort_column=namonthly’); ?> </ul>

<h2 ><?php _e(‘Archives’); ?></h2>

<ul > <?php wp_get_archives(); ?> </ul>

</div>

Trong tệp này, các chức năng nội bộ của WordPress được gọi để hiển thị các danh mục và Lưu trữ khác nhau của bài đăng. Các chức năng WordPress trả về dưới dạng các mục danh sách, vì vậy bạn nên bọc các chức năng thực tế trong một danh sách không có thứ tự (các thẻ <ul>

Bước 4: tập tin footer.php

Thêm các dòng mã sau vào tệp footer.php:

<div id= “ttr_footer”>

<h1>FOOTER</h1>

</div>

</div>

</body>

</html>

Điều này sẽ thêm một label FOOTER đơn giản. Tuy nhiên, bạn cũng có thể thêm links, additional text, copyright information cho theme của mình thay cho Footer text thuần túy.

Bước 5: style.css File

Thêm các dòng sau vào file style.css

body

{

text-align: left;

}

#ttr_sidebar

{

border-left: 1px solid black;

}

#ttr_footer

{

width: 100%;

border-top: 1px #a2a2a2 solid;

text-align: center;

}

.title

{

font-size: 11pt;

font-family: verdana;

font-weight: bold;

}

Tệp CSS này xác định giao diện cơ bản của chủ đề của bạn, đặt nền trang và thêm đường viền nếu cần.

Trang của bạn sẽ trông như thế này:

tao-theme-wordpress-min
Tạo theme WordPress

Giờ đây, bạn có thể sửa đổi thêm tệp CSS bằng cách thêm hình ảnh, hiệu ứng và nội dung khác vào chủ đề của mình theo ý muốn.

Tuy nhiên, để tùy chỉnh chủ đề, chúng ta sẽ cần một chút kiến ​​thức về HTML, PHP và các chức năng của WordPress. Hơn nữa, người dùng có thể sử dụng Trình tạo theme WordPress, bạn có thể thay đổi chủ đề của mình bất cứ lúc nào mà không cần sử dụng một dòng mã nào. Trình tạo theme WordPress là phần mềm cho phép bạn tạo theme WordPress của mình từ đầu mà không cần bất kỳ kiến ​​thức mã hóa nào.

Ngoài ra người dùng có thể sử dụng phần mềm tạo theme TemplateToaster của riêng bạn. Phần mềm này cung cấp nhiều tính năng với giao diện kéo và thả dễ sử dụng. Dưới đây là hướng dẫn tạo theme WordPress với TemplateToaster.

Hướng dẫn tạo theme WordPress với TemplateToaster

TemplateToaster rất dễ cài đặt và phù hợp với những người mới làm quen với WordPress, không có kiến ​​thức về mã hóa. Việc chúng ta cần làm chỉ là vào phần mềm và tải bộ cài đặt của TemplateToaster, phần mềm này giúp người dùng dùng thử miễn phí.

Hướng dẫn từng bước để tạo theme WordPress với TemplateToaster:

Bước 1: Chọn nền tảng thiết kế trang web của bạn

lua-chon-cms-min
Lựa chọn CMS

Sau khi cài đặt phần mềm, bạn có thể thấy hình ảnh bên dưới sẽ xuất hiện đầu tiên. Tại đây bạn có thể lựa chọn CMS để tạo website, trong hướng dẫn này IMO sẽ chọn thiết kế web WordPress.

Bây giờ bạn có thể thấy một màn hình với hai tùy chọn với Mẫu mẫu và Bắt đầu từ đầu, bạn có thể dễ dàng tìm thấy một mẫu phù hợp trong số nhiều chủ đề WordPress miễn phí trong màn hình bên dưới do IMO hướng dẫn. Nếu bạn đang phát triển một mẫu WordPress, chúng tôi sẽ chọn ” Bắt đầu từ đầu”.

Tiếp theo, bạn sẽ thấy một cửa sổ bật lên yêu cầu bạn chọn màu sắc và kiểu chữ cho chủ đề WordPress của mình từ các tùy chọn có sẵn. Nhấp vào nút OK để xác nhận lựa chọn này.

Bước 2: thiết kế tiêu đề (header)

Tại đây bạn cần chọn chiều rộng và chiều cao của tiêu đề, bạn có thể giữ nguyên chiều rộng mặc định hoặc tùy chỉnh theo ý muốn.

Tiếp theo, bạn cần chọn màu nền cho tiêu đề của mình. Bạn có thể tùy chỉnh màu sắc, độ dốc hoặc tải xuống hình ảnh từ thư viện tích hợp hoặc sử dụng hình ảnh do chính bạn thiết kế.

Giờ đây, chúng tôi có thể thêm “Hộp văn bản” vào tiêu đề của mình và thêm bất kỳ văn bản nào bạn muốn sử dụng.

Sau đó, chúng tôi có thể dễ dàng thêm các biểu tượng mạng xã hội và làm cho tiêu đề của bạn có tính tương tác như bạn muốn.

Như vậy là chúng ta đã hoàn thành việc thiết kế header cho website của mình.

Bước 3: Thiết kế Menu

thiet-ke-menu-min
Thiết kế menu

Sau khi hoàn thành phần Header, chúng ta cần thiết kế menu, chuyển đến tab Menu và chọn chiều rộng và chiều cao bạn muốn đặt cho menu của mình từ các tùy chọn đã cho.

Tương tự như hướng dẫn trong phần Thiết kế tiêu đề, bạn có thể đặt nền cho menu của mình. Bạn có thể chọn từ các tùy chọn mặc định như: Màu sắc, Dải màu và Hình ảnh.

Tiếp tục chọn Logo cho menu của bạn. Chỉ cần chuyển đến tab logo và chọn logo phù hợp với bạn từ thư viện hoặc tải lên thiết kế của bạn, sau đó chọn màu sắc, phông chữ và hình dạng của logo theo mục tiêu kinh doanh và dịch vụ mà bạn đang hướng tới.

Để định cấu hình các nút menu, hãy vào “Menu Button Properties”, sau đó căn chỉnh nút như Alignment > Horizontal > Right to Page. Điều này sẽ giúp căn chỉnh các nút menu ở bên phải của trang.

Tuy nhiên, bạn cũng có thể thiết lập kiểu chữ cho menu của mình rất đơn giản như sau: Vào Typography > Normal/Hover/Active, ngoài ra trong khu vực này còn có một số tùy chọn khác để thay đổi màu chữ.

Bước 4: Thêm trình chiếu

them-slideshow-min
Thêm slideshow

Để thêm trình chiếu, chúng ta cần chuyển đến tab Trình chiếu và kiểm tra tùy chọn trình chiếu được hiển thị ở góc bên trái. Bạn cần chọn hộp kiểm và nó sẽ thêm trình chiếu vào chủ đề WordPress của bạn.

Có các tùy chọn để đặt vị trí trình chiếu như bên dưới, bên trên hoặc ở giữa. Tương tự, bạn có thể đặt chiều cao và chiều rộng của trình chiếu theo các yếu tố có sẵn trên chủ đề WordPress của mình.

Bạn có thể chọn màu nền và hình nền mà bạn muốn cho slideshow. Nhấn vào tùy chọn hình nền và bạn có thể thoải mái lựa chọn hình ảnh từ thư viện có sẵn hoặc cũng có thể tự thiết kế hình ảnh của riêng mình.

Hơn nữa, bạn có thể dễ dàng tùy chỉnh nó bằng cách áp dụng các thuộc tính như vị trí trình chiếu, hiệu ứng chuyển tiếp, chiều rộng, chiều cao, đường viền, v.v. và làm cho nó khác đi như bạn muốn. Sau đó, bạn có thể thêm văn bản để hiển thị thông tin cần thiết.

Đây là những yếu tố mà các nhà phát triển WordPress chuyên nghiệp đã đưa vào chủ đề của họ để làm cho chúng hấp dẫn hơn đối với người dùng.

Bước 5: Chỉnh sửa nội dung của bạn (khu vực chính)

chinh-sua-khu-vuc-content-min
Chỉnh sửa khu vực content

Bây giờ đến khu vực chính tức là khu vực nội dung, bạn chỉ cần nhấp vào văn bản bạn muốn chỉnh sửa và thêm nội dung vào trang web của mình. Tuy nhiên, bạn có thể sử dụng các tùy chọn khác nhau như cài đặt kiểu chữ, màu phông chữ, căn chỉnh văn bản, cỡ chữ, video, hình ảnh, biểu mẫu liên hệ, v.v. Bằng cách này, bạn cần chuẩn bị sẵn văn bản vì nội dung đóng một vai trò. Điều quan trọng là bạn có thể tìm và thu hút đối tượng mục tiêu bằng nội dung trang web của mình.

Bước 6: thiết kế/tùy chỉnh footer

chinh-sua-footer-min
Chỉnh sửa footer

Thiết kế Footer cũng rất đơn giản, cũng giống như vậy bạn chỉ cần vào tab Footer và bắt đầu chọn các tùy chọn để tùy chỉnh nó, bạn sẽ thấy nhiều tùy chọn như đặt hình nền hoặc màu sắc, kiểu chữ, lề, đệm, chiều cao, chiều rộng,… Bạn cũng có thể có các biểu tượng xã hội ở chân trang, liên kết, siêu liên kết, v.v.

Bước 7: Thêm nhiều trang hơn

them-mot-trang-moi-min
Thêm một trang mới

Như vậy, trong hướng dẫn trên, bạn đã thiết kế thành công trang chủ của mình. Ngoài ra, bạn cũng có thể tạo các trang khác. Chỉ cần nhấp vào biểu tượng “+” ở bên trái và thêm bao nhiêu trang tùy thích. Khi bạn nhấp vào biểu tượng +, một cửa sổ bật lên xuất hiện nơi bạn cần nhập: Tên, Tiêu đề, Slug, sau đó nhấp vào nút Lưu để xác nhận hành động của bạn.

Tuy nhiên, nếu muốn thêm trang con vào một trang nào đó, bạn cũng có thể thực hiện, chỉ cần nhấp vào dấu ba chấm tương ứng với tên trang đã chọn, sau đó nhấp chuột phải để hiển thị trên trang mong muốn và chọn “Thêm con trang” và một hệ thống phân cấp ảo sẽ xuất hiện.

Tên trang > > Thêm trang con

Tại đây, bạn sẽ thấy các tùy chọn khác như Xóa, Chỉnh sửa và Sao chép. Bạn có thể sử dụng các tùy chọn này để thực hiện hành động thích hợp.

Bước 8: Xuất chủ đề WordPress của bạn

Sau khi tạo thành công chủ đề WordPress của bạn, bây giờ bạn cần xuất. Chúng ta phải chuyển đến tab Tệp và nhấp vào tùy chọn “Xuất”.

Sau khi nhấp vào nó, bạn sẽ thấy cửa sổ bật lên “Xuất chủ đề WordPress”. Tại đây, bạn cần thêm tên tệp và sau đó điều hướng đến đường dẫn mà bạn muốn xuất chủ đề WordPress của mình. Sau khi hoàn tất, nhấn nút Xuất.

Bước 9: Đăng nhập vào bảng quản trị WordPress của bạn

Sau khi hoàn thành các bước trên, chúng ta cần đăng nhập vào bảng điều khiển WordPress của bạn và điều hướng đến Giao diện > Chủ đề > Thêm mới.

Ngoài ra, bạn có thể nhấp vào tùy chọn “Tải chủ đề lên” để tải chủ đề của mình lên WordPress.

Duyệt qua chủ đề WordPress của bạn (nó sẽ là một tệp zip) và nhấn nút Cài đặt ngay để xác nhận lựa chọn của bạn.

Bây giờ, bạn sẽ thấy một màn hình có thông báo “Đang cài đặt chủ đề từ tệp đã tải xuống: tên tệp của bạn.zip”. Tại đây, bạn phải nhấp vào nút Kích hoạt và nó sẽ kích hoạt chủ đề đã cài đặt của bạn.

Tuy nhiên, trong hướng dẫn này, bạn đã tạo theme WordPress của mình bằng cách sử dụng TemplateToaster, tích hợp Contact Form 7. Đây là một công cụ cho phép người dùng tạo khung liên hệ trang web phổ biến nhất, phổ biến nhất và lâu đời nhất cho mã nguồn WordPress. Vì nó đã được cài đặt sẵn, bạn chỉ cần nhấp vào tùy chọn “Bắt đầu cài đặt plugin” và để nó cài đặt plugin cho WordPress của bạn.

Bởi vì TemplateToaster đi kèm với nội dung dễ dàng thêm vào chủ đề của bạn. Vì vậy, bất kỳ nội dung nào bạn đã thêm vào chủ đề WordPress của mình khi nó được tạo đều có thể được xuất trực tiếp tại đây, có thể được thực hiện như sau:

Giao diện> Tùy chọn chủ đề> Tab nhập nội dung> Nút nhập nội dung

Bây giờ một cửa sổ xuất hiện với thông báo “Nhập nội dung”. Tại đây bạn có thể chọn nội dung muốn nhập. Trang, Menu, Menu chân trang, tất cả các tùy chọn này đều được cung cấp và bạn có thể tự do chọn trang hoặc nội dung nào bạn muốn xem và bạn có thể chọn tất cả các tùy chọn và cho phép nhập tất cả nội dung của mình cùng một lúc.

Sau tất cả các hướng dẫn mà IMO đã giới thiệu, chủ đề WordPress của bạn hiện đã sẵn sàng để hoạt động như hình ảnh mô tả bên dưới.

hoan-thanh-tao-theme-wordpress-min
Hoàn thành tạo theme WordPress

Vậy là xong, bạn đã hoàn thành hướng dẫn viết theme WordPress từ TemplateToaster. Phần mềm thiết kế web TemplateToaster cung cấp nhiều tùy chọn nâng cao hơn như nền video, trình chiếu, kiểu menu mới, v.v. Ngoài các bài hướng dẫn của IMO, bạn cũng có thể tìm hiểu thêm cách tạo theme, template chuyên nghiệp cũng như sử dụng plugin kiểm tra theme WordPress…

Kết luận

Trong bài viết này, IMO đã hướng dẫn bạn cách tạo theme WordPress mà không cần viết một dòng mã nào. Tôi hy vọng bạn sẽ thành công trong việc tạo một chủ đề WordPress cho trang web của mình. Vui lòng để lại bình luận và góp ý bên dưới để IMO giúp bạn. Thanks.

Link bài viết Hướng dẫn tạo theme WordPress từ Scratch: https://imo.com.vn/huong-dan-tao-theme-wordpress-tu-scratch/