วิธีเพิ่มไฟล์ css ที่กำหนดเองในธีมได้อย่างไร

บางธีมไม่ขอให้คุณแก้ไขไฟล์ style.css แทนการใช้ไฟล์ custom.css แทน หากคุณเขียนโค้ดบน custom.css มันจะเขียนทับสไตล์องค์ประกอบเดียวกันใน style.css ฉันคิดว่าวิธีนี้ทำเพื่อป้องกันการสูญเสียสไตล์ผู้ใช้ในการอัพเดตธีมใช่หรือไม่

มันทำงานอย่างไร พวกเขารวมไฟล์ custom.css ไว้ในธีมแล้วหรือยัง? แต่ไฟล์นี้รวมอยู่ในธีมอย่างไรเพื่อให้ธีมค้นหาสไตล์ใน custom.css ก่อน? ขอบคุณ

ฉันมักจะเพิ่มรหัสชิ้นนี้ถ้าฉันต้องการเพิ่มไฟล์ CSS อื่น

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

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

การใช้ @import ใน WordPress เพื่อเพิ่ม CSS ที่กำหนดเองนั้นไม่ใช่วิธีปฏิบัติที่ดีที่สุดอีกต่อไป แต่คุณสามารถทำได้ด้วยวิธีการนั้น

แนวปฏิบัติที่เหมาะสมที่สุดคือการใช้ฟังก์ชันwp_enqueue_style()ใน functions.php

ตัวอย่าง :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

เปิดใช้งานชุดรูปแบบลูกและเพิ่มรหัสตัวอย่างต่อไปนี้ใน function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

ข้อเสนอของฉันจะใช้ธีมลูก มันง่ายมากที่จะใช้งานและการแก้ไขทั้งหมดที่คุณทำ (รวมถึงสไตล์) จะแยกออกจากชุดรูปแบบเดิมอย่างสมบูรณ์

เพื่อป้องกันการเขียนทับ CSS ของธีมหลักหรือไฟล์อื่น ๆ คุณควรใช้ธีมลูกใน WordPress เสมอ ... หากไม่ทำเช่นนั้นจะทำให้คุณปวดหัวและมีปัญหาใหญ่

https://codex.wordpress.org/Child_Themes

... และด้วยความง่ายในการติดตั้งธีมลูกจึงไม่มีเหตุผลที่คุณไม่ควรใช้ธีม

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

เกี่ยวกับcustom.cssไฟล์มีหลายวิธีที่นักพัฒนาชุดรูปแบบจัดการสิ่งนี้ ... หลายคนทำเช่นนี้เพื่อพยายามและป้องกันไม่ให้ลูกค้าที่ไม่ต้องการใช้ชุดรูปแบบลูกจากการแก้ไขstyle.cssไฟล์หลัก....

ในแบบที่คุณไม่ควรกังวลเกี่ยวกับเรื่องนั้นตราบใดที่คุณใช้ชุดรูปแบบเด็กคุณไม่ควรกังวลเกี่ยวกับการปรับปรุงชุดรูปแบบของคุณในภายหลังและสูญเสียการเปลี่ยนแปลงของคุณ ... รับนิสัยของการใช้ชุดรูปแบบเด็กเสมอ จะขอบคุณฉันในภายหลังฉันสัญญา

ถ้าคุณต้องการที่จะปล่อยให้ html ของคุณพร้อม คุณสามารถเพิ่มสิ่งนี้ลงในไฟล์ css ของคุณ ฉันคิดว่ามันดีกว่า

@import url("../mycustomstyle.css");

นอกจากนี้ยังขึ้นอยู่กับธีมของคุณซึ่งจะทำงานกับธีมลูกและแม่

- โปรดจำไว้ว่า css ทำงานตามลำดับ (เมื่อใช้ตัวระบุระดับเดียวกันกับที่ใช้ไปแล้ว) ดังนั้นสิ่งที่สุดท้ายในไฟล์ของคุณจะเขียนทับ ดังนั้นให้นำเข้าสไตล์ที่คุณกำหนดเองที่ด้านล่างหากคุณต้องการแทนที่สิ่งต่างๆ

วิธีที่ดีที่สุดคือการรวมรูปแบบ enqueued ทั้งหมดลงในฟังก์ชั่นเดียวแล้วเรียกพวกเขาใช้wp_enqueue_scriptsการกระทำ เพิ่มฟังก์ชั่นที่กำหนดไว้ในฟังก์ชั่นของ theme.php ด้านล่างของการตั้งค่าเริ่มต้น

บล็อครหัส:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

โปรดทราบ:

พารามิเตอร์ที่ 3 คืออาร์เรย์การพึ่งพาซึ่งอ้างอิงถึงสไตล์ชีทนี้หรือไม่นั้นขึ้นอยู่กับสไตล์ชีทอื่น ดังนั้นในโค้ดข้างต้น custom.css ของเราขึ้นอยู่กับ style.css

|
พื้นฐานเพิ่มเติม:
wp_enqueue_style()ฟังก์ชั่นอาจมี 5 พารามิเตอร์: เช่นนี้ - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
ในโลกแห่งความเป็นจริงของการเข้ารหัส WP โดยปกติแล้วเรายังเพิ่มไฟล์จาวาสคริปต์ / jQuery ไลบรารีภายในฟังก์ชั่นเช่นนี้:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

พารามิเตอร์ที่ 5 เป็น true / false เป็นทางเลือก (params ที่ 2, 3 และ 4 ก็เลือกเช่นกัน) แต่สำคัญมากมันช่วยให้เราวางสคริปต์ของเราไว้ในส่วนท้ายเมื่อเราใช้พารามิเตอร์บูลีนเป็นจริง

ไปที่ลักษณะ> แก้ไข CSS จาก WordPress Dashboard ของคุณ

นี่คือหน้าจอพร้อมโปรแกรมแก้ไข CSS พื้นฐาน

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

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

https://codex.wordpress.org/Child_Themes

ไปที่เส้นทางนี้คุณจะขอบคุณตัวเองในภายหลัง