Blog

ตามปรกติที่เราทำเว็บนั้น ตัว 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 ให้มานั้นละครับ

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

[css]
/*
Theme Name: Twenty Eleven
Theme URI: https://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: https://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