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


Posted

in

by

Comments

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

  1. […] Child Theme นั้นคือ style.css ถ้าอ่านมาจากหัวข้อที่แล้ว เราก็จะทราบว่า style.css […]

  2. Chiiz Diiz'Karei-ml Avatar

    แล้วถ้าจะใส่ โค๊ดแบ๊กกราวน์ มันจะขึ้นมั้ยคะ

    1.  Avatar
      Anonymous

      หมายความว่ายังไงเหรอครับ ยังไม่เข้าใจคำถามอะครับ

  3. Archer Avatar
    Archer

    อ่านจากบทความนี่ก็ได้ความรู้เพิ่มว่า ใน wordpress ต้องตั้งชื่อว่า style.css เท่านั้น

    1. ถ้าผมต้องการเขียน css ขึ้นมาอีกไฟล์แล้ว add เพิ่ม เข้าไปเป็นไฟล์ css ที่ 2 ต้องตั้งชื่ออย่างไร และสั่งให้ wordpress เรียกใช้อย่างไร
    2. ผมต้องการให้ไฟล์ ccs ที่เขียนขึ้นใหม่ ใช้งานกับบาง page, post โดย style.css หลัก หยุดทำงานใน page, post นั้น

    กรุณาแนะนำด้วยครับ ต้องการใช้งานแบบนี้พอดี พยายามค้นหาแล้วไม่เจอ

    1. rabbitinblack Avatar
      rabbitinblack

      ข้อ 1 นะครับ
      ถ้าต้องการให้ใช้ css ตัวอื่น ๆ เพิ่มเติม ก็ทำคล้าย ๆ กับเรียกตัวหลักละครับ แค่เราจะเปลี่ยนเป็น <?php echo get_stylesheet_directory_uri(); ?> เช่น <link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/reset.css” type=”text/css” /> แบบนี้เราก็จะเรียก reset.css ขึ้นมาอีกตัวได้ครับ

      ข้อ 2 นะครับ
      อันนี้ผมแนะนำว่า ต้องศึกษาเรื่องนี้ก่อนนะครับ https://codex.wordpress.org/images/1/18/Template_Hierarchy.png
      แผนผังนี้จะบอกเราว่า หน้าใดหน้านึงจะเรียก File ไหนก่อนหลัง สมมติว่า page นี้อยากให้ template เปลี่ยนไป เราก็ดู page slug แล้วสร้าง File page-xxxxx.php ขึ้นมา

      ด้านในเราก็เขียนให้ get_header(‘xxxx’); แทนครับ มันก็จะไปเรียก File header-xxxx.php ขึ้นมาใช้งาน ใน header-xxxx.php เราก็ให้มันเรียก css ที่เราต้องการให้เป็นในหน้านั้น ๆ เลยครับ

      ผมอธิบายเข้าใจใช่มั้ยครับ งงตรงไหนหรือเปล่าครับ

    2. Archercnx Avatar
      Archercnx

      โอ้ว..มองเห็นทางไปต่อแล้ว อธิบายพร้อมยกตัวอย่างแบบนี้ทำให้เข้าใจง่าย ที่เหลือผมต้องไปลองทำเองก่อนแล้วล่ะ ขอบคุณมากครับ

      1. rabbitinblack Avatar
        rabbitinblack

        ครับ ค่อย ๆ ทำไปทีละขั้น พอเข้าใจแล้ว ก็ไม่น่าจะยากเกินแล้วละครับ ^^

      2. Archercnx Avatar
        Archercnx

        ตรงนี้งง งง ขอความกระข่างอีกนิดครับ (เพราะโปรแกรมมิ่งผมไม่ค่อยแข็งแรงแต่ใจรัก) สมมติว่า ผมมี page ที่อยากให้เปลี่ยน template ชื่อ sample.php มี page slug abcd ผมก็สร้างไฟล์ใหม่ (หรือสร้าง template ใหม่ครับ?) ชื่อ page-abcd.php ขีันมา

        ทีนี้ใน page-abcd.php ผมก็เขียน get_header(‘abcd’) แล้วมันจะไปเรียกไฟล์ อะไรมาใช้ครับ ตรงนี้งง (เห็นแนะนำว่า “มันก็จะไปเรียก File header-xxxx.php ขึ้นมาใช้งาน” ก็คือว่าเราก็ต้องสร้างไฟล์ header-xxxx.php ขึ้นมาอีกไฟล์นึง ผมเข้าใจถูกหรือเปล่าครับ )

        ขอบคุณที่แนะนำครับ

        1. rabbitinblack Avatar
          rabbitinblack

          ก็ต้องสร้าง header-abcd.php ขึ้นมาครับ แล้วใน header-abcd.php ก็คล้าย ๆ กับ header.php ของเรานั่นละครับ

          จะแตกต่างก็ตรงที่เราอยากให้มันเรียก css ตัวไหนเพิ่มเติม หรือไม่อยากให้เรียก css ตัวไหน ก็แล้วแต่เราจะเขียนเลยครับ

  4. Öüthai Gae Soüliyavong Avatar
    Öüthai Gae Soüliyavong

    สหวัดดีครับพี่ ผมรบกวนขอถามนะครับ ถ้าผมอยากแก้ไข style.css ที่Editor เพื่อ @import Font เข้าไปยังหน้าเว็บคือต้องแก้ยังไง ทำยังไงครับ คือเว็บเป็นภาษาลาวนะครับ แต่มันอ่านไม่ได้ครับ เลยอยากเพี่ม font เข้าไปให้อ่านได้ รบกวนนะครับ ขอบคุณครับ

      1. Öüthai Gae Soüliyavong Avatar
        Öüthai Gae Soüliyavong

        ทำไมมัน อับโหลดไม่ได้ครับ รบกวนด้วยครับ
        Installing Plugin from uploaded file: use-any-font.4.2.3.zip
        Unpacking the packing…
        Installing the Plugin…..
        Could not create directory./home/saslaoco/domains/saslao.com/public_html/wp-content/plugins/use-any-font/plugin installing failed
        Return to Plugin pages

Leave a Reply to Archercnx Cancel reply

Your email address will not be published. Required fields are marked *