ไอคอนส่วนต่อประสานหลายไมล์รวมอยู่ในสไปรท์เดียว ปุ่มโซเชียลมีเดียพร้อม CSS sprite แบบกำหนดเอง (การปรับรูปภาพให้เหมาะสม) ไอคอนโซเชียลมีเดียสีสำหรับ html

โกลอฟนา / อูซันเนียทำงานผิดปกติ

แหล่งข้อมูลออนไลน์สำหรับการพับ CSS spritesตัวอย่างเช่น http://spritepad.wearekiss.com/ หรือ http://www.spritecow.com/ Vtim คุณจะรู้ได้ง่ายว่าอะไรเหมาะกับคุณ ที่นี่ฉันพร้อมที่จะชนะ CSS sprite. แกนกลิ่นเหม็น:

โครงสร้าง html

คอนเทนเนอร์ div พื้นที่ คอนเทนเนอร์ div ปุ่มโซเชียลเป็นการเปลี่ยนแปลง

โครงสร้าง CSS สำหรับสไปรท์แจ้งเบาะแส

เนื้อหา ( พื้นหลัง: url("fon.png"); สี: #1aa5ca; ) .box ( margin: 250px; padding: 25px; background: #; text-indent: -9999px; display: inline-block; ) .click ( พื้นหลัง: url("click.png"); width: 200px; height: 86px; display: block; ) .vk( background: url("vc.png"); width: 51px; height: 52px; margin: 10px พื้นหลังตำแหน่ง: 0 0px การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-transition: ความทึบ 0.5s; ความทึบ 0.5s; /* Opera */ ความทึบ: 0.6; float: left;) .vk:hover ( พื้นหลัง: url(" vc.png"); width: 51px; height: 52px; opacity: 1; ) .ya( background: url("ya.png"); width: 50px; height: 50px; margin: 10px; background-position: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5s; 0.5s;/* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5s; :hover ( พื้นหลัง: url(" ya.png"); width: 50px; height: 50px; background-position: 0 -50px; opacity: 1; ) .ma( background: url("ma.png"); width: 51px; height: 52px; ระยะขอบ : 10px; พื้นหลังตำแหน่ง: 0 0px; การเปลี่ยนแปลง: opait y 0.5s; -moz-transition: ความทึบ 0.5s; /* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5 วินาที; /* Opera */ ความทึบ: 0.6; ลอย: ซ้าย; : url("ma.png"); ความกว้าง: 51px; ความสูง: 52px; พื้นหลังตำแหน่ง: 0-51px; ความทึบ: 1 )

มันเป็นไปได้ พื้นหลังตำแหน่ง: 00px;ลืมความเคารพของคุณ ฉันตั้งค่าความทึบเป็น 0.6 ความโปร่งใสเล็กน้อย โฮเวอร์ทึบ: 1; ทุกอย่างถูกถ่ายใน (0.5 วินาที) การเปลี่ยนแปลง: ความทึบ 0.5s;เมื่อวางเมาส์ ตำแหน่งของภาพจะเปลี่ยนไป พื้นหลังตำแหน่ง: 0-51px;

Vikoristovuyuchi tsyu tekhnіkuสามารถมีนัยสำคัญ ปรับภาพให้เหมาะสม(น้อยกว่า zvernen ไปยังเซิร์ฟเวอร์)

ป.ล. ชอบอาหารที่จะเขียน!

Zhovten 29, 2019 อัพเดทโพสต์แล้ว

ยูริ นิเมทส์

ประสิทธิภาพของปุ่มโซเชียลมีเดียสำหรับไซต์

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

ใช้ 12 ตัวอย่างเพื่อประหลาดใจและ zavantazhivayte สำหรับความพยายามด้านล่าง:

เอาเปรียบ

ก่อนที่คำพูดจะมีประสิทธิภาพเพียงใดเมื่อชี้มีบทความเพิ่มเติมในไซต์ในหัวข้อนี้:

รับรองผลแล้ว - ขยิบตา!

ตัวอย่างเช่นการตกสู่จิตวิญญาณของฉันผลแรก เลื่อนเมาส์ไปที่รูปภาพด้านล่างเพื่อดูเอฟเฟกต์

(ชี้ไปที่ภาพ)

รับวิธีที่ดีที่สุดในการดูภาพที่สำคัญที่สุดทั้งในไซต์และไซต์ด้านเดียว อย่างที่ฉันได้เขียนไปแล้ว เอฟเฟกต์นั้นยิ่งใหญ่กว่ามาก (12!)

ครก 1 - HTML

สำหรับไอคอนอย่างที่คุณเห็นบนปุ่ม มาตรการทางสังคมเอฟเอ (Font Awesome) ชนะ ไอคอนเชื่อมต่อในแถวเดียวระหว่างบล็อก :

1 <ลิงค์ rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

นอกจากนี้ เมื่อคุณรู้สึกทึ่งกับ vihіdniki ทั้งหมด คุณจึงจำเป็นต้องเลือกเอฟเฟกต์ที่คุณสมควรได้รับ พบเอฟเฟกต์ของฉันในไฟล์ index.html. ไฟล์นี้มีสไตล์ที่จำเป็นทั้งหมดเพื่อสร้างเอฟเฟกต์โฮเวอร์

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class="image-effect-fallback"> <div class="share layer"> <a href = "#" class = "share-button share-via-vk" > <i class = "ฟ้า fa vk" > ติดต่อกับ</a> <href = "#" คลาส = "ปุ่มแชร์ แชร์ผ่านเฟสบุ๊ค"> <i class = "ฟ้า facebook" > เฟสบุ๊ค</a> <href = "#" คลาส = "ปุ่มแชร์ แชร์ผ่านทวิตเตอร์"> <i class = "ฟ้าฟา-ทวิตเตอร์" > ทวิตเตอร์</a> </div> <div class="image-layer"> <img src = "images/tree.jpg" width = "500" alt = "(!LANG:(!LANG:ท่องแคลิฟอร์เนีย)" > !}!} </div> </div>

โครงสร้างที่จำเป็นทั้งหมดє ลืมใส่สไตล์เพิ่มเติมใน CSS เพื่อที่เราจะผ่านไปยังตัวที่ 2 หนึ่งชั่วโมงส่วนที่เหลือของจระเข้

ครก 2 - CSS

พบสไตล์ในไฟล์ HTML สกินระหว่างบล็อก . ดังนั้นในไฟล์สกินที่มีเอฟเฟกต์ต่างกัน บล็อกของเอกสารนี้มีรูปแบบที่แตกต่างกัน

คุณต้องนำสไตล์เหล่านี้มาใส่ในไฟล์สไตล์ของคุณ:

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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 .image-effect-fall-back ( กว้าง : 500px ; สูง : 300px ; ตำแหน่ง : สัมพันธ์ ; ระยะขอบ : 0 อัตโนมัติ ; -webkit-perspective : 800px ; มุมมอง : 800px ; ) .image-effect-l-back ( ตำแหน่ง : สัมบูรณ์ ; บน : 0 ; ซ้าย : 0 ; ความสูง : 300px ; -webkit-transition : 0.6s; การเปลี่ยนภาพ : 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image-layer( -webkit -transform : หมุนX(70deg) ; แปลง : หมุนX(70deg) ; ล้น : มองเห็นได้ ; ) .image-effect-fall-back .image-layer img ( ความสูง : 100% ; ) .image-effect-fall -back .image -layer :before (เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 100%; -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; ความทึบ : 0 ; -webkit-transition : ทั้งหมด 0.5s; ) translateY(110px ) มาตราส่วน(0.75 ); แปลง : หมุนX(114deg) translateZ(-26px ) translateY(110px ) มาตราส่วน(0.75 ); -webkit-transform-origin: ด้านล่าง; -ms-transform-origin: ด้านล่าง; การแปลงแหล่งกำเนิด: ด้านล่าง; ) .image-effect-fall-back :hover .image-layer :before ( ความทึบ : 0.3 ; ) .image-effect-fall-back .share-layer( ตำแหน่ง : สัมบูรณ์ ; ด้านล่าง : 100px ; ซ้าย : 0 ; ความกว้าง : 100% ความสูง : 100px ความทึบ : 0 ดัชนี z : 10 -webkit-transition : 0.6s การเปลี่ยนภาพ : 0.6s -effect-fall-back :hover .share-layer ( ความทึบ : 1 ; -webkit- แปลง : หมุนX(0deg) translateY(-70px ) ; transform : rotationX(0deg) translateY(-70px ) ; ) /*รูปแบบสำหรับทุกปุ่ม*/.share-button( display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*สีของปุ่มโซเชียลมีเดีย*/.share-via-vk ( background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; )

ฉันจะแจ้งให้คุณทราบล่วงหน้า: ในบางกรณีมีการใช้ jQuery ดังนั้นคุณต้องคลิกที่รูปภาพเพื่อให้ได้ผลเต็มที่ คุณเพียงแค่ต้องใช้รหัส JS ทั้งหมดซึ่งได้รับชัยชนะจากส่วนท้ายซึ่งคุณได้รับเกียรติ

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

วิสโนวอค

ตามกฎแล้ว ความคิดสร้างสรรค์มีมากขึ้นเรื่อยๆ ฉันคิดว่าที่นี่คุณสามารถเลือกหนึ่งผลจาก 12 ผลและชนะในโครงการของคุณ

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

สไปรต์ CSS และสไปรต์คืออะไร

เทพดา- รวมภาพเล็ก ๆ ไว้รวมกันเป็นภาพเดียว คุณควรพยายามอย่าถ่ายโอนภาพแสงขนาดเล็ก 10-20 ภาพจากเซิร์ฟเวอร์ไปยังคอมพิวเตอร์ของ Coristuvach แต่ให้ถ่ายโอนภาพเหล่านั้นในสตรีมเดียวโดยรวมเป็นไฟล์เดียว Sprite เข้ามาสู่การออกแบบเว็บจากอุตสาหกรรมเกม ซึ่งกลิ่นเหม็นได้รับชัยชนะในการสร้างกราฟิก 2D แบบเคลื่อนไหว เช่น สัตว์ประหลาด สิ่งที่ควรถ่าย และอื่นๆ

การออกแบบไซต์ยังสามารถหยุดได้ด้วย โดยมีความแตกต่างบางอย่าง ไอคอนจะรวมกันเป็นไฟล์เดียว ตัวอย่างเช่น:

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

เกี่ยวกับตัวเล็กๆ นี้ ฉันพยายามแสดงแผนผังหลักการของหุ่นยนต์ css sprites หากบล็อกมีขนาดใหญ่กว่าภาพพื้นหลัง บล็อกนั้นจะถูกวางไว้ที่มุมซ้ายบน เนื่องจากมีการตั้งค่าไม่ซ้ำในรูปแบบ css แต่เราสามารถเปลี่ยนตำแหน่งของภาพพื้นหลังได้มากที่สุด บน kutบล็อก. โดยเฉพาะอย่างยิ่ง tse corisno เช่นบล็อกเช่นสำหรับrozmіrom dorivnyuє okremiy іkontsі เรามีไอคอนหนังขนาด 32x32 นี้ กลิ่นเหม็นกระจายในแนวนอน แต่ในแนวตั้ง เราไม่จำเป็นต้องเปลี่ยนตำแหน่งของขี้เถ้า เรากำหนดตำแหน่งของพื้นหลัง ทารก -32 px ถูกถ่ายในไอคอนบล็อก -64 px คือไอคอน Facebook ฯลฯ

จะสร้างปุ่มกดบนโปรไฟล์โซเชียลมีเดียได้อย่างไร?

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

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

/* อัปเดตปุ่มสมัครสมาชิก*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( เคอร์เซอร์: ตัวชี้ ;color: #1E90FF;text-decoration: none;ขนาดตัวอักษร: 100%; ) .spmenu span ( display: inline-block; width: 32px; height: 32px; ) no-repeat; ) .spmenu span.sprite_gplus(ตำแหน่งพื้นหลัง: 0px 0px;) .spmenu span.sprite_rss (ตำแหน่งพื้นหลัง: -96px 0px;) .spmenu span.sprite_email (ตำแหน่งพื้นหลัง: -128px 0px;)

ในอันดับนี้ สำหรับองค์ประกอบผิว อยู่ตรงกลางของชั้นเรียน spmenu" ถาม ภาพพื้นหลัง icon.pngซึ่งเป็นชุดไอคอน เคารพในสิ่งที่ єแถว vbudovanim องค์ประกอบіvสำหรับ specifіkatsієyu HTML เพื่อขอให้คุณrazmіriที่เข้มงวด (ความกว้างและความสูง) เรามีหน้าที่รับผิดชอบในการเปลี่ยนวิธีการแสดง yogo เป็นบล็อก CSS Powers(แถว: แสดง: inline-block). ขยายบล็อกขนาด 32x32 เพื่อให้ตรงกับรูปแบบของไอคอนของเรา

มักจะzamіst แท็ก , , ฯลฯ ข้าพเจ้าถือว่าปิดนี้ผิด ตอนนี้คุณสามารถเปลี่ยนสไตล์ของแท็กมาตรฐานและเป็นสากลได้ . แท็ก สร้างคำขอไปยังเซิร์ฟเวอร์ได้ในพริบตา และเรา zastosovayuchi sprite ช่วยเร่งปริมาณคำขอเหล่านี้

จะรับไอคอนสำหรับเทพดาได้ที่ไหน

  1. ทาสีตัวเอง.
  2. ค้นหาในระบบค้นหาจากรูปภาพ
  3. ที่ Merezhya มี dobirki іkonพิเศษ, yakіมักจะ lunayut โดยไม่มีค่าใช้จ่าย
  4. โซเชียลมีเดียและบริการจำนวนมากถูกโพสต์บนเว็บไซต์ของโลโก้และไอคอนอย่างเป็นทางการ ซึ่งคุณสามารถใช้กับภาคผนวกของคุณได้
  5. ในการสไปรท์ไฟล์สไปรท์ไอคอนโซเชียลมีเดียโดยอัตโนมัติ คุณสามารถเร่งความเร็วด้วยบริการ เราเลือกไอคอนตามลำดับที่ต้องการ เลือกไฟล์เก็บถาวรด้วยสคริปต์ แกะและแยกรูปภาพ icon.png- ไฟล์สไปรท์พร้อม

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

โปรดทราบปุ่มเมนูปุ่ม-ส่งบนช่องที่จะลบการปรับปรุงมันเสียไปท้ายบทความ สมัครรับข้อมูลอัปเดต หากคุณต้องการเริ่มต้นใหม่

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

บริการต่างๆ เช่น ฉันได้รับชัยชนะบนเว็บไซต์ของลูกค้าและในบล็อกของฉันเอง - i บริการ Qi ช่วยให้คุณใช้งานชุดได้อย่างง่ายดาย

เหตุใดพลังของปุ่มโซเชียลจึงอยู่หน้าบริการและปลั๊กอิน

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

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

  1. วิธีที่ฉันออกเสียงไม่ใช่การแก้แค้น สวัสดี. Hі, posilannya є แต่กลิ่นเหม็นทั้งหมดจะเป็นเหมือน posilannya ภายใน สำหรับ bajannya คุณสามารถ zavzhdi คุณจะไม่สามารถเห็นพวกเขาอย่างใดอย่างหนึ่ง

  1. ดูเจ ติดตั้งง่าย. เพียงพอที่จะแทรกโค้ด html ในบล็อกที่รหัสทางออกด้านข้างของไซต์เริ่มสไปรท์เพิ่ม สไตล์ CSSว่าการติดตั้งเสร็จสิ้น คุณจะต้องแก้ไขพาธไปยังไฟล์ด้วยภาพปุ่ม
  2. จุดนี้ shvidshe ไม่ใช่ข้อดีและไม่ใช่ลบสำหรับการบล็อกปุ่มโซเชียล เคล็ดลับคือบล็อกของคุณไม่มี lichnik ให้กดปุ่ม І คุณสามารถคิดลบ เอล จากอีกด้านหนึ่ง คุณสามารถใส่ปุ่มสกินได้ และคุณจะรู้ว่าคุณกดปุ่มกี่ครั้งและแชร์บทความของคุณกับโซเชียลเน็ตเวิร์กของผู้ดูอย่างแน่นอน
  3. สถิติที่รวบรวมโดยบริการจะไม่ส่งต่อไปยังบุคคลที่สามบนไซต์ของคุณอีกต่อไป

การแทรกบล็อกของปุ่มโซเชียลที่รหัสทางออก

เราดูเหมือนตัวเลือกคลาสสิกหากมีการขยายปุ่มหลังจากบทความ

คุณยังสามารถเปิดไฟล์ที่คุณต้องส่งเพื่อเผยแพร่บทความ (single.php) และเพิ่มปุ่มโซเชียลลงในโค้ดทางออก หรือคุณสามารถ zrobiti ผ่านธีมฟังก์ชั่นไฟล์ (functions.php)

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

การแทรกบล็อคในโค้ดเอาต์พุต single.php

Properedzhennya: ก่อนซังของต้นกล้าทำเองทั้งหมด สำเนาสำรองไฟล์ single.php!

เปิดแผงผู้ดูแลระบบ WordPress « ดูดาว» — "บรรณาธิการ" — "รายการเดียว (single.php)".

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

ดูภาพหน้าจอก็ให้เกียรติเน้นที่โค้ดความเห็นนั้น. І ใส่รหัสคำแนะนำด้านล่าง

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

และแกน i เองคือโค้ด html สำหรับบล็อกปุ่มโซเชียล:

คำอธิบายเบื้องหลังรหัส: tse หนึ่งบล็อกคลาส DIV іz บังคับให้เปิดขึ้นในหน้าต่างการผสานที่ลื่นไหล ด้วยเหตุนี้ ฟังก์ชัน onClick=window.open จึงถูกเปิดใช้งาน การแทนที่แรงบนบทความถูกกำหนดโดยแกนของรหัส cim. ผิวของพลังอาจมีระดับของมันเอง ซึ่งภาพของปุ่มนั้นควรจะเป็น

ผู้ที่แทรกผ่านรหัสเอาต์พุตเสร็จสมบูรณ์ ฉันให้สิ่งที่จำเป็นแก่คุณในการเปิดใช้งานสไตล์ css

การแทรกบล็อกในรหัสเอาต์พุตของ single.php ผ่านฟังก์ชันของธีม

ก่อนทำสำเนา ให้ทำสำเนาสำรองของไฟล์ functions.php!

เพื่อที่จะชนะตัวเลือกนี้ คุณต้องเปิดไฟล์ functions.php และเพิ่มรหัสในที่สุด:

/* แทรกปุ่มโซเชียล */ add_action("comments_template","soc_button"); ฟังก์ชั่น soc_button() (?> และโปรดใช้ความระมัดระวังหากคุณใส่รหัส คุณไม่ผิดที่จะพลาดสัญลักษณ์อื่นๆ เหล่านั้น ปิดโค้ด php ดีกว่าไหม?>. มิฉะนั้น เว็บไซต์จะหยุดทำงาน

คำอธิบายเบื้องหลังรหัส:สถานที่ที่จะวางปุ่มโซเชียลมีเดียถูกตั้งค่าผ่านคีย์ API comments_template ด้านหลังคีย์ cim คือช่องว่างก่อนความคิดเห็น โค้ดของปุ่มโซเชียลจะอยู่ที่แท็กส่งคืนของโค้ด php และโค้ด php ที่รหัส ฉันจำพวกมันได้ด้วยสีแดง ผู้มีเล่ห์อุบายของการสอดแทรก โค้ด htmlใน PHP ผ่านฟังก์ชันธีม

ด้วยวิธีนี้และด้วยวิธีนี้เราจะไปต่อที่การรับภาพไปยังไซต์

อัปโหลดรูปภาพปุ่มไปยังเซิร์ฟเวอร์

ตัวอย่างเช่น ฉันเตรียมสไปรท์จากรูปภาพปุ่มโซเชียล คุณสามารถใช้ประโยชน์จากพวกเขา

สไปรท์ ก็เหมือนผู้พิชิตอย่างก้น มีความสำคัญน้อยกว่า 3.97 kb และปุ่มที่ไม่จำเป็นมากกว่า และถ้าเป็นสไปรต์ มันจะพาไปที่ฐานเท่านั้น ไม่ใช่สำหรับปุ่มสกิน

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

การเชื่อมต่อสไตล์ CSS

krok นี้สามารถเป็น zvichayno, vikonati ก่อน แต่ฉันจะvolіyu vikonati พับทั้งหมด งานด้านเทคนิคจากนั้นไปยังรายการที่ได้รับจากสไตล์ css

นอกจากนี้ ให้เพิ่มไฟล์ style.css ซึ่งใช้สำหรับการออกแบบเว็บไซต์ของคุณ І แทรกรูปแบบแกน q:

แบ่งปัน ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") เลื่อนแบบไม่ซ้ำ 0px 0px โปร่งใส;) .share a.vkontakte ( พื้นหลัง: url("http://test..png ") เลื่อนแบบไม่ทำซ้ำ -168px 0px โปร่งใส; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( พื้นหลัง: url("http://test..png ") no-repeat เลื่อน -336px 0px โปร่งใส ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( พื้นหลัง: url("http //test..png ") เลื่อนแบบไม่ทำซ้ำ -294px 0px โปร่งใส ) .share a.odnoklassniki ( พื้นหลัง: url("http://test..png ") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( พื้นหลัง: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( พื้นหลัง: url("http://test..png ") เลื่อนไม่ซ้ำ -378px 0px โปร่งใส; ) .share a.evernote ( พื้นหลัง: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( พื้นหลัง: url("http://test.. ) png ") เลื่อนแบบไม่ซ้ำ -462px 0px โปร่งใส; ) .share a.email ( background: url("http://test..png ") no-repeat scroll -504px 0px transparent; ) .share a.print ( พื้นหลัง: url("http://test.. png " ) เลื่อนแบบไม่ซ้ำ -546px 0px โปร่งใส ) .share a.digg ( พื้นหลัง: url("http://test..png ") เลื่อนแบบไม่ซ้ำ -588px 0px โปร่งใส ) .share a.spring ( พื้นหลัง: url("http://test..png ") no-repeat scroll -630px 0px transparent; )

คำอธิบายเบื้องหลังรหัส: class.share กำหนดรูปลักษณ์ที่สดใสให้กับบล็อก ขยายปุ่มสกิน และตั้งค่าพื้นหลังเดียว และพลังของสกินที่อยู่ไกลออกไปสามารถมีระดับของตัวเองและพลังของสกินดังกล่าวได้ โดยพลังของพื้นหลังจะกำหนดลักษณะที่ปรากฏของปุ่ม ปุ่ม Wicon เช่น css sprite และปุ่ม skin มีความกว้างและความสูง 40px และมีระยะขอบ 2px ระหว่างกัน ซึ่งช่วยให้คุณกำหนดรูปภาพสำหรับปุ่มสกินได้อย่างแม่นยำ ปุ่มแรกจะแสดงเป็น 0 และปุ่มอื่นเป็น 42 เป็นต้น ในรหัส qi ความหมายจะถูกทำเครื่องหมายด้วยสีส้ม การส่งไปที่สไปรท์จะเห็นเป็นสีส้มด้วย คุณสามารถเปลี่ยนได้ระหว่างทางไปยังสไปรท์ของคุณ

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

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


แกนตอนนี้มีหนวด Z เราจะเอาหัวที่เหลือ เราขอให้คุณโชคดีและโชคดีกับบทความใหม่และบทเรียนวิดีโอ

ทางเลือกของบรรณาธิการ