WordPress is the world’s favorite b

WordPress is the world’s favorite blogging software. It powers more than 68 million websites worldwide and is used by publishers like New York Times, Reuters and CNN. One of the reasons for WordPress’ immense popularity is its easy theming capabilities. Almost anyone with a bit of HTML and CSS knowledge can create a gorgeous WordPress theme.

In this post, we will learn how to create a WordPress theme from an existing HTML file.

[Note:This post assumes that you have some familiarity with HTML, CSS and WordPress, although you don’t need to know PHP].

Struggling to build your website? Learn how to build an online business website with WordPress in this course!

How WordPress Works
Before we can delve deeper into converting a HTML page into a WordPress theme, we need to understand how WordPress actually works.

As you might know, WordPress is based on PHP and MySQL. MySQL is the database backend while PHP is a server side scripting language. All your content is stored in a MySQL database, which can be called on by passing a PHP function.

As an analogy, consider PHP to be your favorite dog and all your content to be a pile of tennis balls. Every time you give a command – ‘fetch’ – PHP runs out and retrieves a ‘stick’ (i.e. some particular content).

To understand how this works, open up your WordPress installation, head to the Appearance -> Editor, and take a look at your theme’s Main Index Template (index.php) file. There will be some code enclosed within PHP tags calling on the header, like this:



This PHP tag basically tells WordPress to retrieve all the content for the website header.

Now if you open Header.php, you will find a link to the website stylesheet:

is an in-built WordPress function that directs PHP to retrieve the blog’s default stylesheet, usually stored as Style.css in the root directory.

As you must already know, the stylesheet is the key to controlling how your website looks and feels. HTML is just the skeletal system of your website; CSS is the muscles and fat and clothes that makes it complete.

With that out of the way, we can now create our own theme from scratch.

Learn the basics of WordPress in this WordPress course!

Creating Your Own WordPress Theme from HTML
To create our own WordPress theme, we will use WordPress’ default TwentyTwelve theme. We will also need a copy of the HTML document that needs to be converted to WordPress. For editing the file, we will use Notepad, though you can also use any other text editor like NotePad++ or even a web editor like Dreamweaver.

Laying the Foundation: Files and Folders
Create a new folder on your desktop. Name it whatever you want your theme to be called, such as ‘UdemysAwesomeWPTheme’.

Now create two blank text files in the folder. Name one style.css, the other index.php (make sure to save as ‘All Files’ in Notepad).

style.css will serve as the primary CSS file for the theme. Index.php is the equivalent of Index.html used in HTML pages. This will also hold all the code for the main content of the page.

To help WordPress identify your theme, include the following information within a comment block in the style.css file:

Theme Name:
Theme URI:
Description:
Version:
Author:

Enclose this information within block comments (/*…*/)

Master CSS with this CSS Prep Course from Udemy.

Setting up CSS
Make sure that TwentyTwelve is the active theme. Then, navigate to Appearance -> Editor in your WordPress admin panel and open the style.css file. Copy the content of this file to the style.css file you created in the theme folder on your desktop. This will serve as the style foundation for our WordPress theme that we can edit later.

Setting up PHP Files
If you open the WordPress theme editor, you’ll find that each theme is divided into separate elements such as Header (header.php), Sidebar (sidebar.php), Main Index Template (index.php) and Footer (footer.php). This is the most basic structure of any WordPress theme which we will follow in our theme as well.

First, divide your HTML code into a header, sidebar, content area and footer. You may have already used identifying tags to divide these sections in your HTML code.

Next, create three additional files in your theme folder. Name them header.php, sidebar.php and footer.php.

Copy the content of each of the HTML sections into their respective PHP files (Header section goes into header.php, Sidebar into sidebar.php, Main Content into index.php, etc.).

Next, log in to your WordPress admin panel and open up the theme editor. Open the header.php file and copy all the PHP code (i.e. code within the tags) and paste it into your newly built header.php file BEFORE the HTML.

Do the same for index.php, sidebar.php and footer.php – copy the PHP code from the TwentyTwelve theme and paste it into their respective PHP files in your theme directory. Make sure that you paste the PHP code before the HTML.

This is the barebones structure of our WordPress theme. We can now call on individual elements in our index.php file to create an entire page.

Fetching Page Elements
Remember how we talked about PHP being able to ‘fetch’ content with a simple function? We will now use this ability to put our theme together.

Open the index.php file that you created in your theme folder. Add the following code to the top of the file, just after the tag:



This code utilizes a built-in WordPress function to fetch and display all the code from the header.php file. We will use this same code to get content for the sidebar and footer.

Add the following code to the bottom of your index.php page, just before the tag:




There you have it – your first WordPress theme!

But wait. This theme is basically just a blank page at the moment. We will now add content to it using WordPress’ famous ‘loop’ function.

Adding Content
WordPress utilizes a string of code called ‘The Loop’ to pull content from a database and display it within a theme. After installing the loop function, you can effectively start blogging in your shiny new WordPress theme.

To use the loop, add the following code into your index.php file. Make sure to paste the code in the that you’re using to hold all your main content:



>


”>




















You don’t have to understand this code (that will come later). Just make sure that you copy it as-is in your main content div.

Final Steps
You’ve now built a fully functional WordPress theme that can pull and display content from a database. The only thing left to do is to activate the theme.

Open up your favorite FTP client and log in to your website directory. Navigate towp-content -> themes folder. Upload your theme folder to this folder. Once the upload is finished, log in to your WordPress admin panel and open the Appearance -> Themes tab. Your theme should be visible here. Click on ‘Activate’ and enjoy your very first custom WordPress theme!

Take your WordPress theming skills to the next level with this course on Building Custom WordPress sites from Scratch.

What are your favorite WordPress theming tips and tricks? Share them in the comments!

ผลลัพธ์ (ไทย) 1:

WordPress เป็นซอฟต์แวร์บล็อกโปรดโลก อำนาจกว่า 68 ล้านเว็บไซต์ทั่วโลก และถูกใช้ โดยผู้เผยแพร่เช่นเดอะนิวยอร์กไทมส์ รอยเตอร์ และ CNN หนึ่งในเหตุผลสำหรับความนิยมอันยิ่งใหญ่ของเวิร์ดเพรสเป็นความสามารถของชุดรูปแบบที่ง่าย เกือบทุกคน มีความรู้ HTML และ CSS สามารถสร้างงดงามเวิร์ดเพรสธีมได้

ในการโพสต์นี้ เราจะเรียนรู้วิธีสร้างธีม WordPress จากแฟ้ม HTML ที่มีอยู่

[หมายเหตุ: บทความนี้สมมติว่า คุณมีบางความคุ้นเคยกับ HTML, CSS และเวิร์ดเพ รส แม้ว่าคุณไม่จำเป็นต้องทราบว่า PHP]

ดิ้นรนเพื่อสร้างเว็บไซต์ของคุณ เรียนรู้วิธีการสร้างในธุรกิจออนไลน์เว็บไซต์ ด้วย WordPress ในหลักสูตรนี้!

ว่า WordPress ทำงาน
ก่อนเราสามารถเจาะลึกลงในแปลงหน้า HTML เป็นรูปแบบ WordPress เราต้องเข้าใจว่า WordPress จริงทำ

อาจทราบ เวิร์ดเพรสอยู่บน PHP และ MySQL MySQL เป็น backend ฐานข้อมูล PHP เป็น ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ เนื้อหาทั้งหมดของคุณถูกเก็บไว้ในฐานข้อมูล MySQL ซึ่งสามารถเรียก โดยการผ่านฟังก์ชัน PHP

เป็นการเปรียบเทียบ พิจารณา PHP ให้ สุนัขของคุณชื่นชอบและเนื้อหาทั้งหมดให้ กองลูกเทนนิส ทุกครั้งที่คุณให้ – 'นำ' – คำสั่ง PHP หมด และดึง 'ไม้' (เช่นบางเนื้อหาบาง)

เข้าใจวิธีใช้งาน การติดตั้งเวิร์ดเพรส หัวจะปรากฏ->แก้ไข เปิด และดูที่แฟ้มแบบดัชนีหลัก (index.php) ของชุดรูปแบบ จะมีบางรหัสที่อยู่ในแท็ก PHP เรียกหัว เช่นนี้:

< ? php get_header() ? >

แท็ก PHP นี้พื้นบอก WordPress เพื่อดึงเนื้อหาทั้งหมดสำหรับหัวข้อเว็บไซต์

ตอนนี้ถ้าคุณเปิด Header.php คุณจะพบลิงค์ไปยังเว็บไซต์สไตล์ชี:

< เชื่อมโยง rel =ชนิด "สไตล์" = "ข้อ ความ/css" สื่อ "ทั้งหมด" href = = " < ? php bloginfo('stylesheet_url'); ? > " / >

ที่นี่, <php bloginfo('stylesheet_url'); ? > ฟังก์ชัน WordPress ที่สร้างในที่นำ PHP เรียกสไตล์เริ่มต้นของบล็อก มักเก็บเป็น Style.css ในไดเรกทอรีราก

คุณต้องรู้อยู่แล้ว สไตล์ชีเป็นกุญแจสำคัญที่จะควบคุมวิธีการที่เว็บไซต์ของคุณดู และรู้สึก HTML เป็นเพียงระบบของเว็บไซต์ของคุณ CSS เป็นกล้ามเนื้อ และไขมันและเสื้อผ้าที่ทำให้

ที่ ออกไป เราขณะนี้สามารถสร้างชุดรูปแบบของเราเองจากรอยขีดข่วนได้

เรียนรู้พื้นฐานของ WordPress ใน WordPress นี้!

สร้างของคุณเอง WordPress ธีมจาก HTML
สร้างธีมเวิร์ดเพรสของเราเอง เราจะใช้ของเวิร์ดเพรสธีม TwentyTwelve นอกจากนี้เรายังจะจำเป็นสำเนาของเอกสาร HTML ที่ต้องการแปลงเป็นเวิร์ดเพรส สำหรับการแก้ไขแฟ้ม เราจะใช้ Notepad แม้ว่าคุณสามารถใช้ใด ๆ อื่นโปรแกรมแก้ไขข้อความเช่น NotePad หรือแม้แต่ web editor เช่น Dreamweaver

วางรากฐาน: แฟ้มและโฟลเดอร์
สร้างโฟลเดอร์ใหม่บนเดสก์ท็อปของคุณ ชื่อเป็นสิ่งที่คุณต้องการชุดรูปแบบจะเรียก เช่น 'UdemysAwesomeWPTheme'.

ตอนนี้ สร้างแฟ้มข้อความว่างเปล่าสองในโฟลเดอร์ ชื่อหนึ่ง style.css ดัชนีอื่น ๆphp (ให้แน่ใจว่าต้องเป็น 'แฟ้มทั้งหมด' ใน Notepad)

style.css จะทำหน้าที่เป็นไฟล์ CSS หลักสำหรับชุดรูปแบบ Index.php จะเหมือนกับการใช้ HTML หน้า Index.html นี้ยังจะเก็บรหัสทั้งหมดสำหรับเนื้อหาหลักของหน้า

ช่วย WordPress ระบุรูปแบบของคุณ รวมถึง ข้อมูลต่อไปนี้ในความคิดเห็นบล็อกใน file:

Theme style.css ชื่อ:
รูป URI:
รายละเอียด:
รุ่น:
ผู้เขียน:

ใส่ข้อมูลนี้ภายในเห็นบล็อก (/*...*/)

Master CSS หลักสูตรนี้เตรียม CSS จาก Udemy

ตั้งค่า CSS
ให้แน่ใจว่า TwentyTwelve ชุดรูปแบบใช้งาน แล้ว ไปปรากฏ->แก้ไขในแผง admin ของ WordPress และเปิดไฟล์ style.css คัดลอกเนื้อหาของแฟ้มนี้ไปยังไฟล์ style.css ที่คุณสร้างขึ้นในโฟลเดอร์ชุดรูปแบบบนเดสก์ท็อปของคุณ นี้จะทำหน้าที่เป็นมูลนิธิแบบในธีม WordPress ของเราที่เราสามารถแก้ไขในภายหลัง

ตั้งแฟ้ม PHP
ถ้าคุณเปิดแก้ไขธีมเวิร์ดเพรส คุณจะพบว่า แต่ละรูปแบ่งออกเป็นองค์ประกอบแยกส่วนหัว (header.php), Sidebar (sidebar.php), แม่ดัชนีหลัก (index.php) และส่วนท้าย (footer.php) เป็นโครงสร้างพื้นฐานของชุดรูปแบบใด ๆ WordPress ซึ่งเราจะติดตามในรูปแบบของเราเป็น

ก่อน แบ่งโค้ด HTML หัวข้อ sidebar พื้นที่เนื้อหา และส่วนท้าย คุณอาจใช้อยู่แล้ว ป้ายระบุเพื่อแบ่งส่วนเหล่านี้ในรหัส HTML ของคุณได้

, สร้างสามแฟ้มในโฟลเดอร์ชุดรูปแบบได้ ชื่อ header.php, sidebar.php และ footer.php.

คัดลอกเนื้อหาของแต่ละส่วน HTML ลงในแฟ้ม PHP ตามลำดับ (ส่วนหัวไปใน header.php, Sidebar เป็น sidebar.php เนื้อหาหลักเป็น index.php ฯลฯ)

,สู่ในแผง admin ของ WordPress และเปิดตัวแก้ไขชุดรูปแบบ เปิดไฟล์ header.php และทั้งหมด PHP รหัส (เช่นรหัสในแท็ก ) คัดลอก และวางลงในหัวของคุณสร้างขึ้นใหม่ไฟล์ php ก่อน HTML

เช่นกันสำหรับ index.php, sidebar.php และ footer.php – คัดลอกโค้ด PHP จากรูป TwentyTwelve และวางลงในแฟ้ม PHP ตามลำดับในไดเรกทอรีของชุดรูปแบบ แน่ใจว่า คุณวางรหัส PHP ก่อน HTML

เป็นโครงสร้าง barebones ของธีมเวิร์ดเพรสของเรา เราตอนนี้สามารถเรียกในแต่ละองค์ประกอบในไฟล์ index.php ของเราสร้างทั้งหน้าได้

นำองค์
จำได้ว่า เราพูดคุยเกี่ยวกับ PHP ที่จะ 'นำ' เนื้อหาพร้อมฟังก์ชั่นง่าย เราจะใช้ความสามารถนี้จะใส่รูปของเรากัน

เปิดไฟล์ index.php ที่คุณสร้างในโฟลเดอร์ชุดรูปแบบ เพิ่มรหัสต่อไปนี้ไปยังด้านบนของแฟ้ม หลังแท็ก :

< ? php get_header(); ? >

รหัสนี้ใช้ WordPress ฟังก์ชันภายในเพื่อนำมาใช้ และแสดงรหัสทั้งหมดจากไฟล์ header.php เราจะใช้รหัสเดียวกันนี้จะได้รับเนื้อหาแถบด้านข้างและส่วนท้าย

เพิ่มรหัสต่อไปนี้ที่ด้านล่างของหน้า index.php เพียงก่อน แท็ก:

< ? php get_sidebar(); ? >
< ? php get_footer(); ? >

มีคุณมีมัน – ธีมเวิร์ดเพรสของคุณแรก!

แต่รอ ชุดรูปแบบนี้โดยทั่วไปเป็นเพียงหน้าว่างในขณะนี้ เราจะเพิ่มเนื้อหาให้ใช้ฟังก์ชัน 'ห่วง' มีชื่อเสียงของ WordPress

เพิ่มเนื้อหา
สายรหัสที่เรียกว่า 'วงเดอะ' ดึงเนื้อหาจากฐานข้อมูล และแสดงในรูปใช้เวิร์ดเพรส หลังจากติดตั้งฟังก์ชันวน คุณสามารถได้อย่างมีประสิทธิภาพเริ่มบล็อกของคุณเงางามใหม่ WordPress ธีมได้

การใช้ลูป เพิ่มรหัสต่อไปนี้ในไฟล์ index.php ของคุณ แน่วางรหัสในการ ว่า คุณกำลังใช้เพื่อจัดเก็บเนื้อหาของหลัก:

< ? php ถ้า (have_posts()): ? >
< ? php ขณะ (have_posts()): the_post(); ? >
< รหัส div = "หลัง < ? php the_ID(); ? > " < ? php post_class(); ? >>

< ? php the_time (กำลัง j y'); ? >
< href เป็น = " < ? php the_permalink();> " rel =ชื่อ"คั่น" =" ลิงก์ถาวรไป < ? php the_title_attribute(); ? > " > < ? php the_title(); ? >
< ? php the_author(); ? >
< ! –สิ้นสุดลงหัว – >

< ? php ถ้า (function_exists ('add_theme_support')) the_post_thumbnail(); ? >
< ? php the_content(); ? >
< ? php edit_post_link(); ? >
< ? php wp_link_pages(); ? >
< ! –สิ้นสุดรายการ – >

<comments_popup_link php ("ความคิดเห็น' '1 ข้อคิดเห็น' '%เห็น'); ? >
< ! –สิ้นสุดลงส่วนท้าย – >
< ! –สิ้นสุดลง – >
< ? php endwhile; / * กรอ หรือต่อไปถ้า ข้อความทั้งหมดได้ถูกนำมาใช้ * / ? >

< ? next_posts_link php ('เก่ารายการ'); ? >
< ? previous_posts_link php ('รายการใหม่'); ? >
< ! –สิ้นสุดการนำทาง- >
< ? php อื่น: ? >
< ? php endif;>

คุณไม่จำเป็นต้องทำความเข้าใจรหัสนี้ (ซึ่งจะมาในภายหลัง) เพียงให้แน่ใจว่า คุณคัดลอกเป็น-เป็นผู้จัดการสายเนื้อหาของหลัก

สุดท้าย
คุณตอนนี้ได้สร้างงานเพรสรูปแบบที่สามารถดึง และแสดงเนื้อหาจากฐานข้อมูล สิ่งเดียวที่เหลือทำเป็นการ เรียกใช้ชุดรูปแบบ

เปิดไคลเอนต์ FTP และล็อกในไดเรกทอรีของเว็บไซต์โปรดของคุณ นำเนื้อหา towp->โฟลเดอร์ชุดรูปแบบ อัพโหลดโฟลเดอร์ชุดรูปแบบของคุณไปยังโฟลเดอร์นี้ เมื่อเสร็จสิ้นการอัปโหลด เข้าสู่แผง admin ของ WordPress และเปิดลักษณะ->ชุดรูปแบบแท็บ ชุดรูปแบบของคุณควรจะเห็นที่นี่ คลิกที่ 'เรียกใช้' และเพลิดเพลินกับธีม WordPress ของคุณเองครั้งแรก!

ใช้ทักษะชุดรูปแบบของเวิร์ดเพรสไปยังระดับต่อไปหลักสูตรนี้บนเว็บไซต์ WordPress เองอาคารจากรอยขีดข่วน

เคล็ดลับโปรด WordPress ชุดรูปแบบและเทคนิคของคุณคืออะไร ร่วมกันไปใน

ผลลัพธ์ (ไทย) 2:

WordPress เป็นซอฟต์แวร์บล็อกโลกที่ชื่นชอบ อำนาจมันมากกว่า 68 ล้านเว็บไซต์ทั่วโลกและมีการใช้โดยสำนักพิมพ์เช่น New York Times, รอยเตอร์และซีเอ็นเอ็น หนึ่งในเหตุผลของความนิยมอันยิ่งใหญ่เวิร์ดเพรสคือความสามารถในการชุดรูปแบบง่าย เกือบทุกคนที่มีบิตของ HTML และ CSS ความรู้สามารถสร้างธีมเวิร์ดเพรสที่งดงามในบทความนี้เราจะได้เรียนรู้วิธีการสร้างธีมเวิร์ดเพรสจากไฟล์ HTML ที่มีอยู่[หมายเหตุ: โพสต์นี้อนุมานว่าคุณมีความคุ้นเคยกับ HTML, CSS และ WordPress, แม้ว่าคุณไม่จำเป็นต้องรู้ PHP] ดิ้นรนที่จะสร้างเว็บไซต์ของคุณ เรียนรู้วิธีการสร้างเว็บไซต์ธุรกิจออนไลน์กับ WordPress ในหลักสูตรนี้! วิธีเวิร์ดเพรสทำงานก่อนที่เราจะเจาะลึกเข้าไปในการแปลงหน้า HTML เป็นธีมเวิร์ดเพรสเราต้องเข้าใจว่าเวิร์ดเพรสใช้งานได้จริงในขณะที่คุณจะได้รู้เวิร์ดเพรสจะขึ้นอยู่กับ PHP และ MySQL MySQL เป็นแบ็กเอนด์ฐานข้อมูลในขณะที่ PHP เป็นเซิร์ฟเวอร์ด้านภาษาสคริปต์ เนื้อหาทั้งหมดของคุณจะถูกเก็บไว้ในฐานข้อมูล MySQL ซึ่งสามารถเรียกโดยผ่านฟังก์ชัน PHP ที่เปรียบเทียบพิจารณา PHP เพื่อเป็นสุนัขที่คุณชื่นชอบและเนื้อหาทั้งหมดของคุณจะเป็นกองลูกเทนนิส ทุกครั้งที่คุณให้คำสั่ง - 'เรียก' - PHP หมดและเรียก 'ติด' (เช่นเนื้อหาโดยเฉพาะอย่างยิ่งบางส่วน) เพื่อให้เข้าใจวิธีการทำงานนี้เปิดการติดตั้งเวิร์ดเพรสของคุณหัวเพื่อลักษณะ -> บรรณาธิการและใช้ มองไปที่หน้าหลักดัชนีแม่แบบไฟล์ (index.php) ธีมของคุณ จะมีโค้ดบางส่วนปิดล้อมภายในแท็ก PHP เรียกร้องให้ส่วนหัวเช่นนี้แท็ก PHP นี้โดยทั่วไปจะบอกเวิร์ดเพรสที่จะดึงเนื้อหาทั้งหมดสำหรับส่วนหัวของเว็บไซต์ตอนนี้ถ้าคุณเปิด header.php คุณจะพบลิงค์ไปยังเว็บไซต์สไตล์ : "/> นี่เป็นหน้าที่เวิร์ดเพรสในการสร้างที่นำ PHP เพื่อดึงสไตล์เริ่มต้นของบล็อกมักจะถูกเก็บไว้เป็น Style.css ในไดเรกทอรีรากในขณะที่คุณต้องรู้อยู่แล้วว่าสไตล์เป็นกุญแจสำคัญในการควบคุมวิธีการเว็บไซต์ของคุณ ดูและรู้สึก HTML เป็นเพียงระบบโครงกระดูกของเว็บไซต์ของคุณ CSS เป็นกล้ามเนื้อและไขมันและเสื้อผ้าที่ทำให้มันสมบูรณ์กับที่ออกจากทางตอนนี้เราสามารถสร้างชุดรูปแบบของเราเองตั้งแต่เริ่มต้นเรียนรู้พื้นฐานของ WordPress ใน WordPress แน่นอน! การสร้างธีมเวิร์ดเพรสของคุณเองจาก HTML ในการสร้างของเรา ธีมเวิร์ดเพรสเองเราจะใช้เวิร์ดเพรส 'เริ่มต้นธีม twentytwelve นอกจากนี้เรายังจะต้องสำเนาของเอกสาร HTML ที่จะต้องมีการแปลงเป็นเวิร์ดเพรส สำหรับการแก้ไขไฟล์ที่เราจะใช้ Notepad แต่คุณยังสามารถใช้โปรแกรมแก้ไขข้อความใด ๆ อื่น ๆ เช่น NotePad ++ หรือแม้กระทั่งการแก้ไขเว็บเช่น Dreamweaver วางรากฐาน: ไฟล์และโฟลเดอร์สร้างโฟลเดอร์ใหม่บนเดสก์ทอปของคุณ ชื่อมันสิ่งที่คุณต้องการรูปแบบของคุณที่จะถูกเรียกเช่น 'UdemysAwesomeWPTheme' ตอนนี้สร้างสองไฟล์ข้อความในโฟลเดอร์ที่ว่างเปล่า ชื่อหนึ่งที่ style.css, index.php อื่น ๆ (ให้แน่ใจว่าจะบันทึกเป็น 'ไฟล์ทั้งหมดในแผ่นจดบันทึก) style.css จะเป็นไฟล์ CSS หลักสำหรับธีม index.php เทียบเท่าของ Index.html ใช้ในหน้า HTML นอกจากนี้ยังจะถือทุกรหัสสำหรับเนื้อหาหลักของหน้าเพื่อช่วยในการระบุเวิร์ดเพรสธีมของคุณรวมถึงข้อมูลต่อไปนี้ในบล็อกแสดงความคิดเห็นในไฟล์ style.css: ชื่อธีม: ธีม URI: คำอธิบาย: เวอร์ชัน: ผู้เขียน: แนบ ข้อมูลเหล่านี้ในการแสดงความคิดเห็นบล็อก (/ * ... * /) โท CSS กับ CSS นี้การเตรียมหลักสูตรจาก Udemy การตั้งค่า CSS ตรวจสอบให้แน่ใจว่า twentytwelve เป็นรูปแบบที่ใช้งานอยู่ จากนั้นให้ไปปรากฏตัว -> แก้ไขในแผง admin คุณ WordPress และเปิดไฟล์ style.css คัดลอกเนื้อหาของไฟล์นี้ไปยังไฟล์ style.css ที่คุณสร้างขึ้นในโฟลเดอร์ธีมบนเดสก์ทอปของคุณ นี้จะทำหน้าที่เป็นรากฐานสำหรับรูปแบบธีมเวิร์ดเพรสของเราที่เราสามารถแก้ไขในภายหลังการตั้งค่าไฟล์ PHP ถ้าคุณเปิดโปรแกรมเวิร์ดเพรสธีมคุณจะพบว่ารูปแบบที่แต่ละคนจะแบ่งออกเป็นองค์ประกอบที่แยกจากกันเช่นส่วนหัว (header.php) แถบด้านข้าง (sidebar.php) ดัชนีหลักแม่แบบ (index.php) และส่วนท้าย (footer.php) นี้เป็นโครงสร้างพื้นฐานที่สุดของธีมเวิร์ดเพรสที่เราจะตามมาในรูปแบบของเราได้เป็นอย่างดีก่อนแบ่งรหัส HTML ของคุณเป็นส่วนหัวด้านข้างพื้นที่เนื้อหาและส่วนท้าย คุณอาจจะได้ใช้แล้วระบุ




























































แท็กจะแบ่งส่วนเหล่านี้ในรหัส HTML ถัดไปสร้างสามไฟล์เพิ่มเติมในโฟลเดอร์ธีมของคุณ ชื่อพวกเขา header.php, sidebar.php และ footer.php คัดลอกเนื้อหาของแต่ละส่วน HTML เป็นไฟล์ PHP ตามลำดับ (ส่วนหัวจะเข้าสู่ header.php, แถบด้านข้างเป็น sidebar.php, เนื้อหาหลักเป็น index.php, ฯลฯ ) ถัดไปเข้าสู่แผง admin คุณ WordPress และเปิดแก้ไขรูปแบบ เปิดไฟล์ header.php และคัดลอกโค้ด PHP (รหัสคือภายในแท็ก) และวางลงในไฟล์ header.php ของคุณสร้างขึ้นใหม่ก่อน HTML ที่ทำเหมือนกันสำหรับ index.php sidebar.php และ footer.php - คัดลอกโค้ด PHP จากธีม twentytwelve และวางลงในไฟล์ PHP ตามลำดับในไดเรกทอรีธีมของคุณ ตรวจสอบให้แน่ใจว่าคุณวางโค้ด PHP ก่อน HTML นี้เป็นโครงสร้างเล่าเรื่องของธีมเวิร์ดเพรสของเรา ตอนนี้เราสามารถเรียกร้องให้แต่ละองค์ประกอบในไฟล์ index.php ของเราเพื่อสร้างหน้าทั้งหมดดึงองค์ประกอบของหน้าจำไว้ว่าเราได้พูดคุยเกี่ยวกับ PHP ความสามารถในการ 'เรียก' เนื้อหาที่มีฟังก์ชั่นง่าย? ตอนนี้เราจะใช้ความสามารถในการวางรูปแบบของเราด้วยกันนี้เปิดไฟล์ index.php ที่คุณสร้างขึ้นในโฟลเดอร์ธีมของคุณ เพิ่มรหัสต่อไปยังด้านบนของไฟล์เพียงหลังแท็ก: รหัสนี้ใช้ฟังก์ชั่น WordPress การเรียกและแสดงรหัสทั้งหมดจากไฟล์ header.php เราจะใช้รหัสเดียวกันนี้ที่จะได้รับเนื้อหาสำหรับแถบด้านข้างและส่วนท้ายเพิ่มรหัสต่อไปนี้ด้านล่างของหน้า index.php ของคุณก่อนที่จะแท็ก: ! มีคุณมีมัน - ธีมเวิร์ดเพรสครั้งแรกของคุณแต่รอ รูปแบบนี้เป็นเพียงหน้าว่างในขณะนี้ ตอนนี้เราจะเพิ่มเนื้อหาไปใช้ WordPress 'ที่มีชื่อเสียง' ห่วง 'ฟังก์ชั่นการเพิ่มเนื้อหาเวิร์ดเพรสใช้สตริงของรหัสเรียกว่า 'ห่วง' ที่จะดึงข้อมูลจากฐานข้อมูลและแสดงในรูปแบบ หลังจากติดตั้งฟังก์ชั่นห่วงคุณอย่างมีประสิทธิภาพสามารถเริ่มการสร้างบล็อกในรูปแบบเวิร์ดเพรสใหม่ของคุณเงางามในการใช้วงเพิ่มรหัสต่อไปนี้ลงในไฟล์ index.php ของคุณ ให้แน่ใจว่าจะวางโค้ดใน
































ที่คุณกำลังใช้จะถือเนื้อหาหลักของคุณ:



" >


"rel = ชื่อ" มาร์ค "=" Permanent Link to ">




















คุณไม่จำเป็นต้องเข้าใจรหัสนี้ (ที่จะมาในภายหลัง) เพียงให้แน่ใจว่าคุณคัดลอกตามที่เป็นเนื้อหาหลักของคุณ div ขั้นตอนสุดท้ายคุณได้สร้างตอนนี้ธีมเวิร์ดเพรสทำงานได้อย่างสมบูรณ์ที่สามารถดึงและเนื้อหาการแสดงผลจากฐานข้อมูล สิ่งเดียวที่เหลือจะทำคือการเปิดใช้งานรูปเปิด FTP ไคลเอนต์ที่คุณชื่นชอบและเข้าสู่ระบบไปยังไดเรกทอรีเว็บไซต์ของคุณ นำทาง towp เนื้อหา -> โฟลเดอร์รูปแบบ อัปโหลดโฟลเดอร์ธีมของคุณไปยังโฟลเดอร์นี้ เมื่ออัพโหลดเสร็จแล้วเข้าสู่แผง admin คุณ WordPress และเปิดลักษณะ -> แท็บธีมส์ ธีมของคุณควรจะมองเห็นที่นี่ คลิกที่ 'เปิด' ที่กำหนดเองและสนุกกับธีมเวิร์ดเพรสแรกของคุณ! ใช้เวิร์ดเพรสของคุณทักษะ theming ไปที่ระดับถัดไปที่มีหลักสูตรเกี่ยวกับการสร้างเว็บไซต์ที่กำหนดเองเวิร์ดเพรสจากรอยขีดข่วนนี้อะไรคือเคล็ดลับที่คุณชื่นชอบเวิร์ดเพรสชุดรูปแบบและเทคนิค? แบ่งปันให้ในความคิดเห็น!

ผลลัพธ์ (ไทย) 3:

WordPress เป็นซอฟต์แวร์บล็อกที่ชื่นชอบของโลก มันพลังเว็บไซต์ทั่วโลกกว่า 68 ล้านบาท และจะถูกใช้โดยผู้เผยแพร่เช่น New York Times , รอยเตอร์ และซีเอ็นเอ็น หนึ่งในเหตุผลสำหรับความนิยมที่เวิ้งว้าง . . ' ในบทความง่ายของมัน เกือบทุกคนที่มีบิตของ HTML และความรู้ CSS สามารถสร้างธีม WordPress ที่งดงาม

ในโพสต์นี้เราก็จะได้เรียนรู้วิธีการสร้างธีม WordPress จากไฟล์ HTML ที่มีอยู่

[ หมายเหตุ : บทความนี้อนุมานว่าคุณมีความคุ้นเคยกับ HTML , CSS และ WordPress แม้ว่าคุณไม่จำเป็นต้องรู้ PHP ] .

ดิ้นรนเพื่อสร้างเว็บไซต์ของคุณ เรียนรู้วิธีการสร้างเว็บไซต์ธุรกิจออนไลน์กับ WordPress ในหลักสูตรนี้


. . ทำงานอย่างไรก่อนที่เราจะเจาะลึกเข้าไปในแปลงหน้า HTML เป็นธีม WordPress , เราต้องการที่จะเข้าใจวิธีการทำงาน . . .

อย่างที่คุณอาจจะรู้ , WordPress จะขึ้นอยู่กับ PHP และ MySQL MySQL เป็นฐานข้อมูลที่แบ็กเอนด์ในขณะที่ PHP เป็นภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ . เนื้อหาทั้งหมดของคุณจะถูกเก็บไว้ในฐานข้อมูล ซึ่งสามารถถูกเรียกโดยผ่านฟังก์ชัน PHP .

เป็นเปรียบเทียบพิจารณา PHP เป็นสุนัขที่คุณชื่นชอบและเนื้อหาทั้งหมดของคุณเป็น กองลูกเทนนิส ทุกครั้งที่คุณให้คำสั่ง ' เรียก ' – PHP ทั้งหมดและเรียก ' ติด ' ( เช่นบางเนื้อหาที่เฉพาะเจาะจง )

เข้าใจแล้ว งานนี้เปิดการติดตั้ง WordPress ของคุณ ไปปรากฏ - > แก้ไขและดูของคุณธีมหลักดัชนีแม่แบบ ( PHP ) ) ไฟล์จะต้องมีรหัสที่แนบอยู่ภายในแท็ก PHP เรียกหัวแบบนี้

< ? get_header() PHP ? >

นี้ PHP แท็กโดยทั่วไปจะบอก WordPress เพื่อดึงเนื้อหาทั้งหมดสำหรับส่วนหัวของเว็บไซต์

ตอนนี้ถ้าคุณเปิด header.php , คุณจะพบลิงค์ไปยังเว็บไซต์สไตล์ชีต :

< ลิงค์ rel = " สไตล์ " ประเภท = " text / css " สื่อ = " ทั้งหมด " href = " < ? bloginfo PHP ( 'stylesheet_url ' ) ; ? > " / >

อยู่ ?bloginfo PHP ( 'stylesheet_url ' ) ; ? > เป็นที่สร้างขึ้นในฟังก์ชันที่ PHP เพื่อดึงนำ WordPress บล็อกของสไตล์ชีตปริยายโดยปกติเก็บไว้ที่ style.css ในไดเรกทอรีราก

อย่างที่คุณต้องรู้ , สไตล์ชีตคือกุญแจสำคัญในการควบคุมวิธีการเว็บไซต์ของคุณดู และรู้สึก HTML เป็นเพียงระบบโครงร่างของเว็บไซต์ของคุณ ; CSS เป็นกล้ามเนื้อและเสื้อผ้าไขมันและทำให้มันสมบูรณ์

กับที่ออกจากทางที่เราสามารถสร้างธีมของเราเองจากรอยขีดข่วน .

เรียนรู้พื้นฐานของ WordPress ในหลักสูตร WordPress นี้

สร้าง WordPress ธีมของคุณเองจาก HTML
เพื่อสร้างธีม WordPress ของเราเอง เราจะใช้ WordPress เริ่มต้น ' twentytwelve ธีม เราก็จะต้องมีสำเนาของเอกสาร HTML ที่ต้องแปลงเป็น WordPress สำหรับการแก้ไขไฟล์ เราจะใช้สมุดแม้ว่าคุณยังสามารถใช้โปรแกรมแก้ไขข้อความใด ๆอื่น ๆเช่น Notepad หรือแม้แต่โปรแกรมแก้ไขเว็บ เช่น Dreamweaver .

วางรากฐาน : ไฟล์และโฟลเดอร์
สร้างโฟลเดอร์ใหม่บนเดสก์ทอปของคุณ ชื่ออะไรก็ได้ที่คุณต้องการ รูปแบบของคุณจะเรียก เช่น ' udemysawesomewptheme ' .

ตอนนี้สร้างสองไฟล์ข้อความเปล่าในโฟลเดอร์ ชื่อ style.css , ดัชนีอื่น ๆPHP ( ให้แน่ใจว่าจะบันทึกเป็น ' ไฟล์ทั้งหมด ' ใน Notepad ) .

style.css จะเป็นหลักไฟล์ CSS สำหรับรูปแบบ index.php ก็เทียบเท่า index.html ที่ใช้ในหน้า HTML นี้จะยังถือทั้งหมดรหัสสำหรับเนื้อหาหลักของหน้า

ช่วย . ระบุรูปแบบของคุณ รวมข้อมูลต่อไปนี้ภายในความคิดเห็นบล็อกในไฟล์ style.css :

กระทู้ชื่อ :

รายละเอียด : รูปแบบ URI :รุ่น :

เขียน :

ใส่ข้อมูลนี้ในบล็อกความคิดเห็น ( / * . . . * / )

อาจารย์ CSS ด้วย CSS เตรียมหลักสูตรจาก Udemy

การตั้งค่า CSS
ให้แน่ใจว่า twentytwelve เป็นธีมที่ใช้งาน งั้น ไปปรากฏ - > แก้ไขในแผง admin WordPress ของคุณและเปิด style.css ไฟล์ คัดลอกเนื้อหาของแฟ้มนี้ใน style.css แฟ้มที่คุณสร้างขึ้นในรูปแบบของโฟลเดอร์บนเดสก์ทอปของคุณนี้จะเป็นสไตล์สำหรับ WordPress ของเราที่เราสามารถแก้ไขได้ในภายหลัง การตั้งค่าไฟล์ PHP


ถ้าคุณเปิดธีม Editor , คุณจะพบว่า แต่ละชุดแบ่งออกเป็นองค์ประกอบแยกต่างหาก เช่น ส่วนหัว ( header php ) ด้านข้าง ( sidebar . PHP แม่แบบดัชนีหลัก ( PHP ) ดัชนี ) และส่วนท้าย ( ส่วนท้าย . php )นี่เป็นโครงสร้างขั้นพื้นฐานที่สุดของธีมที่เราจะปฏิบัติตามในรูปแบบของเราเช่นกัน

แรก แยกรหัส HTML ของคุณในแถบด้านข้างพื้นที่เนื้อหาส่วนหัวและท้ายกระดาษ คุณอาจจะเคยใช้แท็ก < div > การแบ่งส่วนเหล่านี้ในรหัส HTML ของคุณ .

ต่อไป สร้างสามแฟ้มเพิ่มเติมในโฟลเดอร์ธีมของคุณ ชื่อ header.php sidebar.php PHP , และท้าย . .

คัดลอกเนื้อหาของแต่ละส่วนของ HTML ลงในไฟล์ php ของตน ( ส่วนหัวเข้าไป header.php นอกรอบใน sidebar.php หลัก เนื้อหาที่เป็น index.php , ฯลฯ ) .

ต่อไปเข้าสู่แผง admin WordPress ของคุณและเปิดขึ้นรูปแบบการแก้ไข เปิดแฟ้มและคัดลอกทั้งหมด header.php โค้ด PHP ( เช่นรหัสภายใน < ? PHP . . . > แท็ก ) และวางลงในของคุณที่สร้างขึ้นใหม่ หัวไฟล์ PHP HTML ก่อน

ทำเช่น index.php sidebar.php footer.php – , และคัดลอกโค้ด PHP จากกระทู้ twentytwelve และวางลงในไฟล์ php ของตนในไดเรกทอรีธีมของคุณ ให้แน่ใจว่าคุณจะวางโค้ด HTML ก่อน

นี่เป็นโครงสร้างแบร์โบนของ WordPress ธีมของเรา ตอนนี้เราสามารถเรียกในแต่ละองค์ประกอบในไฟล์ index.php ของเราเพื่อสร้าง
ทั้งหน้า

จำได้ว่า เราเรียกองค์ประกอบของหน้าพูดคุยเกี่ยวกับ PHP สามารถ ' เรียก ' เนื้อหาที่มีฟังก์ชันอย่างง่าย ตอนนี้เราต้องใช้ความสามารถในการวางรูปแบบของเรากัน

เปิดไฟล์ index.php ที่คุณสร้างขึ้นในโฟลเดอร์ธีมของคุณ เพิ่มรหัสต่อไปนี้ไปยังด้านบนของไฟล์หลังจาก < ร่างกาย > แท็ก :

< ? PHP get_header() ; ? >

รหัสนี้ใช้ฟังก์ชันในตัวที่จะเรียก WordPress และแสดงผลทั้งหมดรหัสจากไฟล์ header.php . เราจะใช้รหัสเดียวกันนี้เพื่อรับเนื้อหาสำหรับแถบด้านข้างและท้าย

เพิ่มรหัสต่อไปนี้ไปด้านล่างของหน้า index.php ของคุณก่อน < / ร่างกาย > แท็ก :

< ? PHP get_sidebar() ; ? >
< ? PHP get_footer() ; ? >

มีคุณได้–ธีมแรกของคุณ !

แต่รอชุดรูปแบบนี้เป็นเพียงหน้าว่างในขณะนี้ ตอนนี้เราจะเพิ่มเนื้อหาที่จะใช้ฟังก์ชั่น WordPress มีชื่อเสียง ' ' ห่วง ' .

เพิ่มเนื้อหา
WordPress ใช้สตริงของโค้ดที่เรียกว่า ' ห่วง ' เพื่อดึงข้อมูลจากฐานข้อมูลและแสดงในรูปแบบ หลังจากติดตั้งฟังก์ชันลูป คุณได้อย่างมีประสิทธิภาพสามารถเริ่มต้นบล็อกในเงาใหม่ของคุณ WordPress ธีม

ใช้วงเพิ่มรหัสต่อไปนี้ลงในไฟล์ index.php ของคุณ ให้แน่ใจว่าได้วางรหัสใน < div > ที่คุณกำลังใช้เพื่อเก็บทั้งหมดของคุณเนื้อหา :

< ? ถ้า ( have_posts() ) : ? >
< ? PHP ในขณะที่ ( have_posts() ) : the_post() ; ? >
< div id = " โพสต์ - < ? PHP the_id() ; ? > " < ? PHP post_class() ; ? > >
< div >
< div > < ? the_time PHP ( ' m J Y ' ) ; ? > < / DIV >
< H2 > < a href = " < ? PHP the_permalink() ; ?> " rel = " มาร์ค " title = " ถาวรลิงค์ < ? PHP the_title_attribute() ; ? > " > < ? PHP the_title() ; ? > < / a > < / H2 >
< div > < ? PHP the_author() ; ? > < / DIV >
< / DIV > < ! - จบโพสต์หัว– >
< div >
< ? ถ้า ( function_exists ( ' add_theme_support the_post_thumbnail() ' ) ; ? >
< ? PHP the_content() ; ? >
< ? PHP edit_post_link() ; ? >
< ? PHP wp_link_pages() ; ? >
< / DIV > < ! และจบรายการ– >
< div >
< div > < ?PHP comments_popup_link ( ' . ' , ' 1 ' , ' % ความคิดเห็น ' ) ; ? > < / DIV >
< / DIV > < ! จบท้าย–โพสต์– >
< / DIV > < ! จบ ( >
< ) โพสต์ ? PHP endwhile ; / * ย้อนกลับ หรือต่อไปถ้าโพสต์ทั้งหมดได้ใช้ * / ? >
< div >
< div > < ? PHP next_posts_link ( ' รายการ ' เก่า ) ; ? > < / DIV >
< div > < ? PHP previous_posts_link ( ' รายการใหม่ ' ) ; ? > < / DIV >
< / DIV > < ! - จบนำทาง– >
< ? PHP อีก : ? >
< ? จบถ้า PHP ; ?>

คุณไม่เข้าใจโค้ดนี้ ( ซึ่งจะตามมาทีหลัง ) เพียงแค่ให้แน่ใจว่า คุณคัดลอกเนื้อหาของคุณเป็นหลักใน div

สุดท้ายขั้นตอน
ท่านได้สร้างการทำงานอย่างเต็มที่ธีม WordPress สามารถดึงและแสดงข้อมูลจากฐานข้อมูล สิ่งเดียวที่ต้องทำคือการเปิดใช้งานชุดรูปแบบ

เปิดลูกค้า FTP ที่คุณชื่นชอบและบันทึกในไดเรกทอรีที่เว็บไซต์ของคุณนำทางเนื้อหา - โฟลเดอร์ > ธีม towp . อัปโหลดโฟลเดอร์ธีมของคุณไปยังโฟลเดอร์นี้ เมื่ออัพโหลดเสร็จแล้ว เข้าสู่แผง admin WordPress ของคุณและเปิดตัวแท็บ > ธีม กระทู้ของคุณควรจะมองเห็นได้ที่นี่ คลิกที่ ' ใช้งาน ' และเพลิดเพลินกับครั้งแรกของคุณเองธีม !

ใช้ WordPress ของคุณบทความทักษะในระดับต่อไปกับหลักสูตรนี้ในการสร้างเว็บไซต์ WordPress เองจากรอยขีดข่วน

อะไรที่คุณชื่นชอบ . บทความเคล็ดลับและเทคนิค ? แบ่งปันในความคิดเห็น !