ยุคของธีมขนาดใหญ่ที่เต็มไปด้วยฟีเจอร์ต่างๆ ดูเหมือนจะใกล้จะหมดลงแล้ว ในขณะที่เราเห็นการเพิ่มขึ้นของธีมแบบบางที่ให้การสนับสนุนปลั๊กอินของบุคคลที่สามที่ย้ายเข้ามา การเพิ่มการรองรับสำหรับตัวสร้างเพจเป็นวิธีที่ดีในการเพิ่มพลังให้กับผู้ใช้ของคุณเมื่อ คือการสร้างเว็บไซต์ด้วยธีมของคุณ หากนั่นคือสิ่งที่คุณกำลังพิจารณา เรายินดีเป็นอย่างยิ่งที่จะให้คุณเลือก Beaver Builder เป็นตัวสร้างเพจของคุณ

Beaver Builder ใช้งานได้ดีเมื่อแกะกล่องกับเกือบทุกธีม จนถึงตอนนี้ ฉันไม่คิดว่าเราเคยได้ยินเกี่ยวกับธีมใดที่ใช้ไม่ได้จริงๆ ยังคงมีบางสิ่งที่คุณสามารถทำได้เพื่อให้ทำงานได้ดียิ่งขึ้น ก่อนที่ฉันจะลงรายละเอียดสำคัญๆ ต่อไปนี้คือเหตุผลว่าทำไมฉันถึงคิดว่า Beaver Builder เป็นตัวเลือกที่ดี...

• เป็นเรื่องง่ายสำหรับผู้ใช้ในการเริ่มต้นเนื่องจากมีเวอร์ชัน Lite ที่ wordpress.org ซึ่งพวกเขาสามารถเริ่มต้นและใช้งานได้โดยไม่ต้องเสียเงินแม้แต่บาทเดียว
• คุณสามารถสร้างโมดูลแบบกำหนดเองที่สามารถรวมกลุ่มไว้ในธีมของคุณได้โดยใช้คู่มือโมดูลแบบกำหนดเองของเรา
• ไม่มีอาการบวมที่นี่ Beaver Builder จะโหลดเฉพาะสคริปต์และสไตล์ที่ต้องการในหน้าที่กำหนดเท่านั้น ไม่ใช่ทุกอย่างที่อยู่ภายใต้ดวงอาทิตย์
• เราได้สร้าง Beaver Builder เพื่อให้ใช้งานง่ายในขณะที่ยังคงอัดแน่นไปด้วยพลังงานเพียงพอที่จะทำงานให้สำเร็จ ความเรียบง่ายอยู่ในเรดาร์ของเราเสมอ ดังนั้นคุณจะไม่เห็นเราทำอะไรเกินเลยด้วยฟีเจอร์ต่างๆ
• ผู้ใช้ของคุณจะได้รับการดูแลอย่างดีหากเกิดปัญหาใดๆ เกิดขึ้น เราให้การสนับสนุนที่น่าทึ่งอย่างยิ่ง

หากคุณกำลังมองหาตัวอย่างที่ดีของผู้อื่นที่ให้การสนับสนุน Beaver Builder ในธีมของพวกเขา ไม่ต้องมองหาที่ไหนนอกจากเพื่อนของเราที่ WebMan Design และ UpThemes เรารู้สึกยินดีเป็นอย่างยิ่งที่พวกเขาเลือกที่จะสนับสนุนเครื่องมือสร้างเพจของเรา และหวังว่าผู้อื่นจะปฏิบัติตามผู้นำของพวกเขา

ฟังดูดีใช่ไหม? ต่อไปนี้คือวิธีทำให้มันเกิดขึ้น

การกำหนดเป้าหมายองค์ประกอบด้วย CSS บนหน้า Beaver Builder เท่านั้น

สิ่งที่พบเห็นได้บ่อยที่สุดอย่างหนึ่งที่ต้องทำตลอดโพสต์นี้คือการกำหนดเป้าหมายองค์ประกอบเฉพาะในหน้า Beaver Builder เท่านั้น ไม่ว่าจะเป็นส่วนหัวของคุณ ตัวตัดเนื้อหา ปุ่มหรืออย่างอื่น ที่ทำได้ง่ายๆ เพราะทุกหน้า Beaver Builder มีคลาสบนเนื้อหาชื่อ fl-builder (เนื้อหาทั้งหมดของเราขึ้นต้นด้วย “fl” เพราะชื่อบริษัทแม่ของ Beaver Builder ฟาสต์ไลน์ มีเดีย) การรู้ว่าคลาสนี้อยู่ในเนื้อหาทำให้คุณสามารถเขียน CSS เฉพาะสำหรับหน้า Beaver Builder ได้

ยังไง? สมมติว่าคุณต้องการกำหนดเป้าหมาย Wrapper เนื้อหาของธีม และลบ Padding ทั้งหมดบนหน้า Beaver Builder ด้วยคลาสตัวถัง fl-builder นั้นง่ายเหมือน...

 .fl-builder #my-content-wrapper { padding: 0; }

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

ปิดการใช้งานส่วนหัวของหน้าเริ่มต้น

โดยส่วนใหญ่เมื่อ Beaver Builder ทำงานอยู่ ก็ไม่จำเป็นต้องมีส่วนหัวของหน้าเริ่มต้น ปกติมันก็แค่ขวางทาง ผู้ใช้ของคุณสามารถปิดการใช้งานได้ด้วยตนเองโดยไปที่เครื่องมือ > แก้ไขการตั้งค่าส่วนกลาง > ส่วนหัวของหน้าเริ่มต้น และป้อนตัวเลือก CSS สำหรับส่วนหัวของหน้าในธีมของคุณ แต่ทำไมไม่ทำให้สิ่งต่างๆ ง่ายขึ้นสำหรับพวกเขาล่ะ

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

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

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

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

ถัดไป ในไฟล์ที่มีส่วนหัวของหน้าของคุณ (อาจเป็น page.php) ให้ล้อมส่วนหัวของหน้าของคุณด้วยโค้ดนี้ดังนี้...

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

ด้วยโค้ดนั้น จะไม่มีการติดตามส่วนหัวของหน้าในมาร์กอัปแม้แต่ครั้งเดียวเมื่อใช้ Beaver Builder เพื่อสร้างเพจ

การลบหรือการปรับระยะขอบและช่องว่างภายใน

มีหลายสิ่งหลายอย่างในแง่ของสไตล์ที่ Beaver Builder ปล่อยให้เป็นไปตามธีมนี้ ในขณะที่บางสิ่งก็ต้องดูแลตัวเอง หนึ่งในนั้นคือช่องว่างภายในและระยะขอบของแถวและโมดูล เนื่องจาก Beaver Builder จัดการเรื่องนั้น การเติมช่องว่างหรือระยะขอบบน wrapper เนื้อหาของธีมของคุณจึงไม่จำเป็น และยังอาจกีดขวางบางสิ่งได้ เช่น พื้นหลังแถวจากขอบจรดขอบ

ตัวอย่างเช่น เมื่อใช้ธีม Twenty Twelve คุณจะเห็นว่ามีพื้นที่เพิ่มเติมรอบๆ เลย์เอาต์ของเครื่องมือสร้างที่ป้องกันไม่ให้ภาพพื้นหลังจรดขอบ...

ด้วยการปรับแต่ง CSS เล็กน้อยโดยใช้คลาส fl-builder ที่ฉันกล่าวถึงข้างต้น ฉันสามารถทำให้มันเป็นแบบนี้...

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

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

แถวเต็มความกว้าง

คุณสมบัติยอดนิยมอีกประการหนึ่งของ Beaver Builder ที่คุณอาจต้องการสนับสนุนในธีมของคุณคือแถวเต็มความกว้าง แถวที่มีความกว้างเต็มไม่เพียงแต่ไปที่ขอบของ Wrapper เนื้อหาเท่านั้น แต่ยังไปที่ขอบของเบราว์เซอร์ด้วย ว้าว!

ตามค่าเริ่มต้น แถวทั้งหมดใน Beaver Builder จะมีความกว้างสูงสุดที่สามารถปรับได้ในการตั้งค่าส่วนกลางและปรับขนาดให้เหมาะสมสำหรับอุปกรณ์ขนาดเล็ก แม้ว่า Wrapper เนื้อหาของคุณจะมีความกว้างเต็ม แถวและเนื้อหาจะยังคงอยู่ในเค้าโครงแบบกล่องเหมือนภาพหน้าจอด้านล่าง

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

นี่เป็นเทคนิคที่ดี แต่จะใช้ได้ก็ต่อเมื่อ wrapper เนื้อหาธีมของคุณไปที่ขอบของเบราว์เซอร์เช่นกัน

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

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

สีปุ่มเริ่มต้น

Beaver Builder ให้การสนับสนุนที่ยอดเยี่ยมสำหรับรูปแบบปุ่มที่หลากหลาย แต่ค่าเริ่มต้นก็ค่อนข้างน่าเบื่อ การเพิ่ม CSS ต่อไปนี้ให้กับธีมของคุณและปรับแต่งให้เข้ากับการออกแบบของคุณจะทำให้ปุ่ม Beaver Builder มีรูปลักษณ์เริ่มต้นที่เหมาะกับสไตล์ของคุณมากขึ้น

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

เพียงระวังอย่าแทนที่สไตล์เริ่มต้นของปุ่มมากเกินไป ไม่เช่นนั้นคุณจะเสี่ยงต่อการทำลายการตั้งค่าของโมดูลปุ่ม

ระวังดัชนี Z

เป็นไปได้ว่าหากคุณเคยเขียน CSS ในชีวิต คุณจะประสบปัญหา z-index ฉันกำลังพูดถึงอะไรโดยเฉพาะ? เหนือสิ่งอื่นใดที่ทำให้บางสิ่งเข้าไม่ถึง อะไรนะ?

อินเทอร์เฟซของ Beaver Builder ควรอยู่ด้านบนของหน้าทั้งหมด ไม่ควรมีอะไรอยู่เหนือหน้านั้น ด้วยเหตุนี้ เราจึงตั้งค่าดัชนี z ให้สูงอย่างน่าขัน แต่ก็ไม่สูงเกินไปในเวลาเดียวกัน หลังจากมีประสบการณ์หลายปี คำแนะนำของฉันคือคุณควรรักษาดัชนี z ให้ต่ำที่สุดเท่าที่จะเป็นไปได้ ฉันรู้ว่ามันเป็นไปไม่ได้เสมอไป ดังนั้นหากคุณพยายามรักษามันไว้ให้ต่ำกว่า 100,000 เป็นอย่างน้อย คุณก็ควรจะโอเค

แนะนำด้วยปลั๊กอิน TGM

ในอดีต นักพัฒนาธีมต้องรวมปลั๊กอินของบุคคลที่สามไว้ภายในธีมของตนโดยตรงเพื่อรวมไว้สำหรับผู้ใช้ ในเวลานั้น ฉันแน่ใจว่านั่นดูเหมือนเป็นวิธีแก้ปัญหาที่ดีและหลายๆ คนยังคงทำอยู่ แต่เราทุกคนรู้ดีว่าเหตุใดจึงไม่ใช่ความคิดที่ดี ความปลอดภัยและการอัปเดต!

จะเกิดอะไรขึ้นหากคุณรวมปลั๊กอินของบริษัทอื่นเข้ากับธีมของคุณและมีช่องโหว่ด้านความปลอดภัยเกิดขึ้น คาดเดาอะไร? เป็นความรับผิดชอบของคุณที่จะต้องส่งการอัปเดตไปยังไซต์ผู้ใช้ของคุณ ผู้พัฒนาปลั๊กอินจะไม่สามารถทำได้เนื่องจากปลั๊กอินอยู่ในไดเร็กทอรีธีมของคุณ มันเคยเกิดขึ้นมาก่อนและฉันเดาว่ามันจะเกิดขึ้นอีกครั้งจนกว่าผู้พัฒนาธีมจะหยุดการปฏิบัตินี้

นอกเหนือจากนั้น คุณจะต้องรับผิดชอบในการเผยแพร่การอัปเดตล่าสุดให้กับผู้ใช้ของคุณ อีกสิ่งหนึ่งที่คุณต้องคำนึงถึงในชีวิตที่วุ่นวายของคุณ Beaver Builder ผลักดันการอัปเดต 50 รายการในปีแรก และเราไม่ได้วางแผนที่จะหยุดเพียงแค่นั้น คุณอยากจะรับผิดชอบเรื่องนั้นจริงๆเหรอ?

ตอนนี้ฉันได้ใส่ความกลัวพระเจ้าไว้ในตัวคุณเกี่ยวกับการฝังปลั๊กอินของบุคคลที่สามในธีมของคุณแล้ว ฉันอยากจะบอกคุณเกี่ยวกับทางเลือกอื่นที่กำลังได้รับความนิยมอย่างมาก

การเปิดใช้งานปลั๊กอิน TGM: วิธีที่ดีที่สุดในการขอและแนะนำปลั๊กอินสำหรับธีม WordPress (และปลั๊กอินอื่น ๆ ) จากเว็บไซต์ของพวกเขา...

การเปิดใช้งานปลั๊กอิน TGM คือไลบรารี PHP ที่ช่วยให้คุณสามารถกำหนดหรือแนะนำปลั๊กอินสำหรับธีม WordPress (และปลั๊กอิน) ของคุณได้อย่างง่ายดาย ช่วยให้ผู้ใช้ของคุณสามารถติดตั้งและเปิดใช้งานปลั๊กอินโดยอัตโนมัติในรูปแบบเดี่ยวหรือเป็นกลุ่มโดยใช้คลาส ฟังก์ชัน และอินเทอร์เฟซ WordPress ดั้งเดิม คุณสามารถอ้างอิงปลั๊กอินที่จัดแพ็คเกจล่วงหน้า ปลั๊กอินจากพื้นที่เก็บข้อมูลปลั๊กอิน WordPress หรือแม้แต่ปลั๊กอินที่โฮสต์อยู่ที่อื่นบนอินเทอร์เน็ต

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

ทำเงินบางส่วน

เรารู้สึกยินดีเป็นอย่างยิ่งที่นักพัฒนารายอื่นได้ชื่นชมผลงานของเรา และยังได้ให้การสนับสนุนผลงานดังกล่าวภายในผลิตภัณฑ์ของตนเองอีกด้วย เรารู้สึกยินดีเป็นอย่างยิ่งที่ได้สร้างขึ้นมาเพื่อเป็นการขอบคุณสำหรับผู้ที่ให้การสนับสนุน Beaver Builder สำหรับธีมของพวกเขา

คำขอบคุณเล็กๆ น้อยๆ นั้นคือตัวกรองที่ช่วยให้คุณสามารถแทนที่ลิงก์อัปเกรดของเราในเวอร์ชัน Lite ด้วยลิงก์พันธมิตรของคุณ ซึ่งสร้างรายได้หลักให้กับคุณทุกครั้งที่มีคนใช้ธีมของคุณตัดสินใจอัปเกรดเป็น Beaver Builder เวอร์ชันที่ต้องชำระเงิน

มันทำงานอย่างไร? เพียงเพิ่มโค้ดต่อไปนี้ลงในไฟล์ฟังก์ชันของคุณในขณะที่เปลี่ยนข้อความที่ระบุว่า YOUR_LINK_HERE ด้วยลิงก์ Affiliate ของคุณและโอมโอรส! คุณอยู่ในธุรกิจ

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

ห่อขึ้น

ด้วยการปรับแต่งเล็กน้อยที่นี่และที่นั่น คุณสามารถทำให้ธีมของคุณพร้อมใช้งานด้วยการสนับสนุนขั้นสูงสำหรับ Beaver Builder ในเวลาไม่นาน อย่าลังเลที่จะแจ้งให้เราทราบหากคุณมีคำถามใดๆ และอย่าลังเลที่จะแบ่งปันหากคุณตัดสินใจที่จะปรับธีมของคุณให้เหมาะสมสำหรับ Beaver Builder หรือรู้สึกว่ามีบางอย่างขาดหายไปจากโพสต์นี้ เราอยากให้คุณร่วมเดินทาง!