Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

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

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

หากคุณต้องการวิธีง่ายๆในการเพิ่มปุ่มที่น่าสนใจในโพสต์และเพจบทแนะนำนี้เหมาะสำหรับคุณ

ผลสุดท้าย

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

เมื่อเราทำเสร็จแล้ว Visual Editor จะมีลักษณะเช่นนี้และมีองค์ประกอบ "สไตล์" ในรูปแบบของเมนูแบบเลื่อนลง:

How-To-Styles-01

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

How-To-Styles-02

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

คำแนะนำด้านความปลอดภัย

ในบทช่วยสอนนี้เราจะแก้ไขไฟล์ต่อไปนี้:

  • fonctions.php
  • style.css

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

การเพิ่มรายการ "สไตล์" ลงในเมนู

เมนูแบบเลื่อนลง“ สไตล์” เป็นส่วนหนึ่งของ WordPress Visual Editor อยู่แล้ว แต่ถูกปิดใช้งานโดยค่าเริ่มต้น ในการเปิดใช้งานคุณต้องเพิ่มรหัสลงในไฟล์ fonctions.php ของชุดรูปแบบปัจจุบันของคุณ

หากต้องการเปิดไฟล์และแก้ไขให้ไปที่เมนู» apparence  »จากนั้นคลิกที่« สำนักพิมพ์ ในเมนูย่อย หากคุณมีเวอร์ชันภาษาอังกฤษไปที่ ลักษณะ> บรรณาธิการ

How-To-Styles-03

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

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

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

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

อย่างไรก็ตามเรายังไม่ได้ทำ หากคุณตรวจสอบรายการเมนูในเมนูแบบเลื่อนลงใหม่นี้คุณจะสังเกตเห็นว่าลักษณะเหล่านี้เกี่ยวข้องกับ Visual Editor ของปุ่มอื่น ๆ

เราต้องการ เพิ่มสไตล์ของเราเองลงในรายการ.

สร้างสไตล์ CSS ของปุ่มของคุณ

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

ตอนนี้เราจะสร้างสไตล์ CSS สำหรับปุ่ม คุณสามารถสร้าง CSS ของคุณเองหรือใช้หนึ่งในแอพสร้างปุ่มออนไลน์มากมาย ตัวสร้างปุ่ม CSS เป็นทางเลือกที่ดีดังนั้นไปที่ไซต์และสร้างปุ่มอย่างรวดเร็วจากนั้นคัดลอก CSS จากนั้นไปที่“ ลักษณะที่ปรากฏ” จากนั้นไปที่“ ตัวแก้ไข” และคลิกที่ไฟล์ style.css ในรายการไฟล์ทางด้านขวา ในภาษาอังกฤษคุณจะมี Appearance> Editor page> style.css

เลื่อนไปที่ท้ายไฟล์อีกครั้งแล้ววาง CSS จากปุ่มด้านล่างลงในไฟล์หรือใช้ CSS ของคุณเอง:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

อัพเดตไฟล์เพื่อบันทึกการเปลี่ยนแปลง

เพิ่มสไตล์ให้กับเมนูแบบเลื่อนลง

ตอนนี้คลิกอีกครั้งที่ไฟล์ fonctions.php  และวางรหัสต่อไปนี้ที่ด้านล่างของไฟล์

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

สังเกตบรรทัดเหล่านี้ภายในตาราง:

  • title - นี่คือชื่อเรื่องที่จะแสดงบนเมนูแบบเลื่อนลง
  • ตัวเลือก - ตัว "a" หมายถึงจุดยึดซึ่งระบุว่าสไตล์นี้มีไว้สำหรับลิงก์
  • คลาส - นี่คือชื่อคลาสของปุ่ม CSS ของเรา

หากคุณใช้ CSS ของคุณเองชื่อคลาสจะเป็นอะไรก็ได้ที่คุณตั้งเป็นชื่อคลาส CSS ของคุณเอง ในตัวอย่างด้านบนปุ่มสไตล์ CSS เรียกว่า linkButton

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

 

How-To-Styles-05

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

How-To-Styles-06

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

ตัวเลือกขั้นสูง

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

หากคุณต้องการสร้างลักษณะปุ่มเพิ่มเติมที่จะเพิ่มลงในรายการแบบเลื่อนลงก็เพียงพอที่จะสร้างรายการอื่นในตาราง (ซึ่งได้รับการเพิ่มใน fonctions.php) และเปลี่ยนสายและชื่อของชั้นเรียน:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

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

ทางลัด

หากทั้งหมดข้างต้นเป็นทฤษฎีที่ยอดเยี่ยมสำหรับคุณอย่างไรก็ตามคุณต้องการวิธีที่เร็วกว่าในการใช้ทฤษฎีนี้โดยไม่ต้องแก้ไขโค้ดปลั๊กอินทั้งสองนี้อาจสนใจคุณ:

สรุป.

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

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

11 หุ้น
หุ้น10
ทวีต1
Enregistrer