[Plug-in benar-benar tidak digunakan] Instal tombol berbagi SNS hanya dengan HTML dan CSS [WordPress]

2019 7 年月日 302019 8 年月日 3

Daftar isi

1. peluang
2. Fitur tombol share dengan kode ini
3. Bagikan kode tombol dan cara memasang
4. HTML
5. CSS
6. Contoh tampilan

peluang

Hingga saat ini, tombol berbagi SNS adalah "Plugin Tombol Bagikan WordPress – AddThisSaya mengandalkan plug-in yang disebut

Plugin ini

Anda dapat menambahkan bookmark Hatena serta SNS luar negeri utama seperti Facebook, Twitter, Line, pocket, dan pinterest.
Terdapat desain tombol share yang sempit dan sempit di bagian samping.

Saya menyukainya karena alasan itu, tetapi itu adalah plug-in yang cukup berat.

Jika Anda mencari "tidak ada plugin, tombol bagikan", Anda akan menemukan metode menggunakan plugin PHP, CSS, HTML, dan ikon sosial.

Kali ini, saya mencoba mengatur tombol berbagi SNS hanya menggunakan CSS dan HTML tanpa menggunakan PHP dan ikon sosial.

Fitur tombol share dengan kode ini

Dibuat hanya dengan HTML dan CSS
PHP, jangan gunakan ikon sosial
mengeksekusi javascript dalam tag
Dapatkan URL dan judul halaman dari halaman yang akan dibagikan secara otomatis
Lebih cepat dari plug-in (maksimum hingga 10 poin dibandingkan dengan AddThis)
Jumlah saham tidak dapat dihitung
Desain horizontal sederhana

Bagikan kode tombol dan cara memasang

HTML

Tempat menulis:
"Tampilan" → "Sesuaikan" → "Widget" → Tempat Anda ingin meletakkan tombol bagikan → Tambahkan widget → "HTML Khusus"

bagikan artikel ini

CSS

Lokasi: Penampilan -> Kustomisasi -> CSS tambahan

/*---SNS share button---*/ /* Text on button */ .fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before { font - keluarga: helvetica neue,helvetica,arial,sans-serif; font-weight: bold; font-size:14px } .fa-facebook:before { konten: "f"; } .fa-twitter:before { konten: "twitter ";} .fa-hatena:before { konten: "B!"; font-family: Verdana; .fa-pocket:before { konten: "pocket"; } /* Penyesuaian posisi tampilan tombol */ .button-area { text-align: center; margin-top:15px; } /* Pengaturan tampilan judul */ .button-area-title { text-align: center; padding:.7em; } /* desain blok tombol */ .button-area li a { padding: 2px; display: block; text-align: center; : none; color: #fff; border-radius: 4px; } /* Warna latar untuk setiap SNS */ .twitter a { background-color: # 55acee; } .facebook a{ background-color: #3b5998; a{ background-color: #008fde; } .line a{ background-color: #1dcd00; } .pocket a{ background-color: #ea5a6c; margin : 0; padding: 0; list-style: none; } /* Atur lebar dan margin tombol */ .button-area li { float: left; width: 19%; -area ul:after { display: block; clear: keduanya; webkit-transform: translateY(-0px); transform: translateY(-3px);