Tag: theme

วิธีปรับ Theme ของ Chrome DevTools
ในการใช้งานตัว DevTools ของ Chrome นั้น จะมี Theme ที่ Chrome เตรียมไว้ให้อยู่ 2 แบบ คือ Light และ Dark

ซึ่งปรกติผมก็จะใช้ Theme Dark อยู่เป็นปรกติ แต่ก็ยังรู้สึกว่า มันเรียบๆ ไป ไม่ค่อยชินเท่าไหร่

เพราะตัว Sublime Text หรือ Visual Studio Code ที่ผมใช้ เราก็ปรับ Theme ของมันเป็นสี เป็นฟอนต์อื่นๆ ที่เราต้องการ เวลาไปค้นว่า เราจะปรับ Theme ของ DevTools ได้อย่างไร

จนไปเจอว่า ให้เราเข้าไปที่ https://chrome.google.com/webstore/category/extensions แล้วค้นหา DevTools Theme

โดยเราเลือกเป็นตัวนี้ Material DevTools Theme Collection

หลังจากที่ Add to Chrome แล้วทำตามขั้นตอนดังนี้
- พิมพ์ chrome://flags ที่ Address Bar
- ค้นหาคำว่า “Developer Tools experiments”
- เปลี่ยนเป็น Enable แล้ว restart Chrome
- เปิด DevTools อีกครั้ง
- ไปที่ Settings > Experiments
- แล้วติ๊กที่ “Allow Custom UI Themes”
- ปิดแล้วเปิดอีกครั้ง
- อย่าลืมเปลี่ยน Theme ให้เป็น “Dark”
มองหา icon เหมือนตัว M ที่อยู่ด้านบนตรงใกล้ๆ Address Bar แล้วคลิก สามารถเลือก Theme ตามที่ให้ได้ดังรูป

เป็นอันเสร็จสิ้น
September 5, 2019
วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme

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

วิธีใช้ WordPress : Themes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

January 2, 2012
Child Theme มันเอาไว้ทำอะไรเหรอ

ในการทำ Theme WordPress นั่น คิดว่าต้องเจอกับคำว่า Child Theme บ้างละ แล้ว Child Theme มันคืออะไรละ แล้วมีไว้ทำอะไร เรามาทำความเข้าใจกับ Child Theme กันนะครับ

Child Theme คืออะไร

Child Theme คือ Theme ที่ยึดหลักโครงสร้างมาจาก Theme อื่น ซึ่งเรียกว่า Parent Theme โดย Child Theme จะแก้ไขหรือเพิ่มเติมฟังก์ชั่นจาก Parent Theme การสร้าง Child Theme ก็ไม่ยาก ลองมาดูกันครับ ว่าเราจะสร้าง Child Theme ได้ยังไง

สร้าง Child Theme ต้องทำยังไง

สร้าง Folder ที่จะเป็น Child Theme ของเราไว้ใน Path wp-content >> themes จะตั้งชื่อ Folder ว่าอะไรก็ได้ตามใจเรา สิ่งที่จำเป็นใน Child Theme นั้นคือ style.css ถ้าอ่านมาจากหัวข้อที่แล้ว เราก็จะทราบว่า style.css เนี่ยทำหน้าที่บอกว่า Parent Theme หรือ Theme ที่เราจะใช้ยึดหลักเพื่อเป็นโครงสร้างให้ Child Theme

style.css สำหรับ Child Theme

โดยส่วนใหญ่เราก็จะดึง CSS จากตัว Parent Theme มาเพื่อใช้งานด้วย สมมติเราจะใช้ Twenty Eleven Theme ตัว style.css เราจะเขียนประมาณนี้

[css]
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: My Name
Template: twentyeleven
*/

@import url("../twentyeleven/style.css"); /* นำ style.css จากตัว Theme หลักมาใช้งานด้วย */

/* Stylesheet เพิ่มเติมจากตัว style.css จากตัว Twenty Eleven Theme */
#site-title a {
color: #009900;
}
[/css]

ข้อสำคัญของ style.css คือ Theme Name กับ Template โดย Theme Name นั้นคือชื่อของ Child Theme และ Template คือชื่อ Folder ของ Theme ที่เราจะใช้เป็นหลัก หรือ Parent Theme

นอกจาก style.css ใน Child Theme เราทำอะไรได้บ้าง

ใน Folder ของ Child Theme นั้น นอกจาก style.css แล้ว ถ้าเราอยากจะแก้ หรือเพิ่มอะไร ก็สามารถเพิ่มใน Folder ของ Child Theme ได้เลย เช่นพวก functions.php page.php หรือ index.php อะไรแบบนั้น

พื้นฐานของ Child Theme คือ สร้าง Theme อันใหม่ที่ยึดหลัก Theme อันใดอันหนึ่ง โดยที่ไม่ได้ไปแก้อะไรใน Theme หลักเลย

November 29, 2011
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 ให้มานั้นละครับ

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: 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

November 27, 2011