[WordPress Theme] เทรนของ WordPress Theme ในปี 2012

ในปีที่ผ่านมา 2011 ตัว WordPress ก็มีการปรับเปลี่ยนต่าง ๆ ไปอยู่มากมาย ไม่ว่าจะเป็นการปรับมาสนับสนุน HTML5 ด้วย Theme Twenty Eleven หรือการปรับ Dashboard ให้เป็น Responsive เรามาดูทิศทางต่อไปในปี 2012 กันว่ามันจะไปยังไง

[Wordpress Theme] เทรนของ WordPress Theme ในปี 2012

ตามไปอ่านที่นี่ครับ : Smashing Special: WordPress Theme Trends For 2012

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme

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

วิธีใช้ WordPress : Themes

ที่เมนู Appearance จะมีหัวข้อ Themes อยู่

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [1]

โดยในส่วน Current Theme นั้นคือ Theme ที่เราใช้งานอยู่ และมีรายละเอียดต่าง ๆ ของ Theme อยู่

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [2]

ส่วน Available Themes คือ Theme ที่เราได้ติดตั้งไว้

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [3]

เราสามารถติดตั้ง Theme เพิ่มได้ในหัวข้อ Install Themes ซึ่งเราสามารถ search หา Theme เพื่อใช้งานได้

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [6]

แต่ถ้าไม่อยากค้นหา แนะนำให้เลือกหัวข้อ Featured ซึ่งจะมี Theme ที่แนะนำอยู่

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [4]

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [5]

สมมติว่าผมเจอ Theme ที่ผมต้องการแล้ว เราสามารถกดที่ preview เพื่อดูตัวอย่างก่อน

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [7]

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [8]

หรือกด Install เพื่อติดตั้ง

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [9]

กรอกข้อมูลของ FTP ของเราเพื่อทำการอัพโหลด Theme เข้าเว็บเรา

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [10]

หลังติดตั้งเสร็จแล้ว เราก็กด Activate เลยครับ

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [11]

ในส่วนของ Current Theme จะเปลี่ยนไปเป็น Theme ที่เราเพิ่งติดตั้งไป

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [12]

หน้าเว็บของเราก็จะเป็น Theme ที่เราติดตั้งแล้วครับ

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [13]

แต่ถ้าเรามีไฟล์ Theme ที่เราต้องการอยู่แล้ว ให้ทำการ Upload ได้เลยครับ

วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme [14]

ซึ่งขั้นตอนต่าง ๆ ก็คล้าย ๆ กับการ Search หาเพื่อติดตั้งเลยครับ ก็ใส่ข้อมูล FTP ของเรา และ Activate Theme ที่เราติดตั้ง

หลังจากนี้เวลาเจอ theme ที่ถูกใจ เราก็ดาวน์โหลดมาติดตั้งเว็บของเราได้แล้วนะครับ ^^

Style.css กับหน้าที่ที่มากกว่าแค่ตกแต่งหน้าเว็บ WordPress

ตามปรกติที่เราทำเว็บนั้น ตัว CSS นั้นเราสามารถที่จะตั้งชื่อเป็นอะไรก็ได้ จะเป็น abc.css หรือจะเป็น snsd.css ก็ได้ แต่ใน WordPress นั้น ในกรณีที่เราใช้

[php]
<?php bloginfo(‘stylesheet_url’); ?>
[/php]

WordPress จะเรียก CSS ที่มีชื่อว่า style.css เป็นมาตรฐาน ซึ่งตัว style.css ใน WordPress ไม่ได้เป็นเพียงแค่ Stylesheet แต่สิ่งที่ style.css ทำหน้าที่ควบคู่ไปด้วย คือการบอกรายละเอียดต่าง ๆ ของ Theme

บอกรายละเอียดของ Theme ใน Style.css

ตัวอย่างที่จะยกให้ดู เราก็ไม่ได้ต้องไปดูไกลเลยครับ ก็ตัว Theme มาตรฐานที่ตัว WordPress ให้มานั้นละครับ

Style.css ทำหน้าที่มากกว่าแค่ Stylesheet ใน WordPress [1]
Theme Twenty Eleven 1.2

เราจะเห็นรายละเอียดต่าง ๆ ของ Theme Twenty Eleven 1.2 ได้ที่หลังบ้านในส่วนของ Appearance >> Themes ซึ่งรายละเอียดของ Theme นั้นอยู่ใน style.css นี่ละ ซึ่งจะเป็น comment อยู่ด้านบนสุดของตัว style.css ในลักษณะแบบนี้ครับ

[css]
/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background — then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 1.2
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/
[/css]

ซึ่งนอกนั้นใน Child Theme ก็ใช้ comment ในส่้วนนี้เพื่อเชื่อมต่อกับ Theme หลักด้วย ในลักษณะแบบนี้

[css]
/*
Theme Name: Twenty Eleven Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http: //example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
[/css]

จุดสำคัญจริง ๆ สำหรับ comment ส่วนนี้ของ Child Theme นั้นจะมีเพียงแค่้

[css]
/*
Theme Name: Twenty Ten Child
Template: twentyeleven
*/
[/css]

โดยในหัวข้อ Template จะเป็นตัวเชื่อมต่อกับ Theme หลักของเรา ซึ่งในส่วนของ Child Theme นั้นจะเขียนถึงในคราวหลังนะครับ

และนี่ละครับ style.css กับหน้าที่ที่มากกว่าแค่ตกแต่งหน้าเว็บ WordPress