Kif Toħloq Buttuni ta' Qsim Soċjali f'GeneratePress?

F'dan it-tutorja, se nħarsu lejn Kif Toħloq Buttuni ta' Qsim Soċjali f'GeneratePress?

Dan bla dubju jgħinek ittejjeb il-promozzjoni cross-channel tal-blog post tiegħek. Dan imbagħad iżid il-preżenza tiegħek fuq il-web.

Jien ser nuruk kif tibni buttuni ta' qsim soċjali li jwaħħlu f'wiċċ l-ilma fuq in-naħa ta' quddiem tal-entrati tal-blog tiegħek. Jiġifieri, dejjem se jkunu viżibbli għall-udjenza tiegħek.

Nistgħu niksbu dan permezz ta 'plugin, iżda l-aħjar parti hija li nibnuhom manwalment. B'dan il-mod tkun taf li qed tevita li żżid JavaScript (joqtol il-prestazzjoni tal-websajt) fuq is-sit tiegħek.

Din il-lezzjoni teħtieġ li jkollok premium GeneratePress, peress li se nużaw il-modulu Elements.

Oħloq Buttuni ta' Qsim Soċjali f'GeneratePress Mingħajr Plugin

Il-ħolqien ta' buttuni ta' qsim soċjali fit-tema GeneratePress mingħajr plugins jitlob li tkun taf dwar l-ikoni SVG.

SVGs huma Grafika Vettorjali Skalabbli. Huma viżwali standard miftuħa (prinċipalment użati bħala ikoni) żviluppati minn W3C (World Wide Web Consortium) (World Wide Web Consortium).

Benefiċċji tal-Użu ta' SVGs

• Huma għandhom daqs żgħir ta 'fajl li qatt ma jaffettwa l-veloċità tas-sit.
• Tista' faċilment iżżid hyperlinks ma' ikoni SVG.
• Huma faċilment modifikabbli ma 'kwalunkwe softwer tal-grafika vettur.
• L-ikoni SVG huma indipendenti mir-riżoluzzjoni, u jagħmluhom eċċellenti għall-veduta tad-desktop, tat-tablet u tal-mowbajl.
• L-istampi SVG huma aktar favur is-SEO meta mqabbla ma 'immaġini konvenzjonali.

Se nużaw l-SVGs minn Iconmonstr. Tifsira, mhux biss l-ikona iżda l-ikona bil-kodiċi XML tagħha wkoll.

Pass 1: Żid il-Kodiċi tal-Butuni tal-Qsim Soċjali Biex Iġġenera l-Elementi tal-Press Hook

Biex twettaq dan, l-ewwel ser ikollok bżonn toħloq Element Ġdid f'GeneratePress. Mur fil-WordPress Dashboard tiegħek, taħt Dehra, Ikklikkja fuq Elementi. Dan se tiftaħ il-paġna Elementi, ikklikkja fuq Żid Element Ġdid.

Hekk kif għafast fuq Żid Element Ġdid, GeneratePress se juri tieqa tad-djalogu. Ikklikkja fuq Hook. Dak huwa preċiż, għandek bżonn ganċ personalizzat GeneratePress għal din l-azzjoni.

Agħti isem lill-Element il-ġdid u żid il-kodiċi.

Agħżel il-ganċ kif jiġġenera wara header, eżegwixxi PHP, u ssettja r-regoli tal-wiri għal Karigi - Karigi kollha.

Peress li għandna bżonn l-ikoni tal-kondiviżjoni soċjali biex iqumu fuq il-vetrina tal-iskrin tagħna. Huwa aħjar li tagħżel Iġġenera Wara Header Hook.

Ir-raġuni li għażilna l-issettjar tal-wiri bħala l-Karigi Kollha hija għaliex tixtieq li l-utenti tiegħek jaqsmu l-kontenut tiegħek fis-siti soċjali tagħhom.

Tinsiex tolqot il-buttuna Ippubblika.

Ikkopja l-kodiċi li ġej biex timplimenta l-istess fuq il-websajt tiegħek.

Pass 2: Wettaq Styling CSS Biex Ikoni tal-Qsim Soċjali

Biex tagħmel dan, mur fuq WordPress dashboard, taħt Dehra, ikklikkja fuq Ippersonalizza.

Dan se jiftaħ il-personalizzatur tat-tema GeneratePress. Hawn mur 'l isfel u kklikkja fuq CSS Addizzjonali.

Paste l-kodiċi CSS li ġej għal stil komparabbli. Inti permess li taġġusta CSS skond il-ħtiġijiet tiegħek.

Pass 3: Riżultat finali tal-Butuni ta' Qsim Soċjali f'GeneratePress

Fl-aħħarnett, hawnhekk huwa kif il- qsim soċjali ikoni għandhom jidhru bħal fuq il-websajt tiegħek. Ftakar li għamilnihom f'wiċċ l-ilma minn fuq f'70% tal-viewport tal-iskrin.

Benefiċċji ta' Buttuni ta' Qsim Soċjali f'GeneratePress (Mingħajr Plugin) (Mingħajr Plugin)

L-użu ta' SVGs minn Iconmonstr jagħmel l-ikoni tiegħek ħfief ħafna
M'hemm l-ebda tip ta 'kodiċi JavaScript involut.

Billi tuża din l-istrateġija, ma tinstalla l-ebda plugin ta 'parti 3rd
Huwa reattiv.

Il-buttuni kollha se jaħdmu oerhört malajr għall-iskop ta 'qsim.

konklużjoni: Kif Toħloq Buttuni ta' Qsim Soċjali F'GeneratePress?

Issa skoprejt kif tibni buttuni ta' qsim soċjali f'GeneratePress billi tuża kodiċi u plugins.

Uża l-għażla li hija faċli għalik u dik li tissodisfa l-ħtieġa tiegħek. Jekk jogħġbok tħossok liberu li teditja l-kodiċi PHP u/jew CSS mill-artiklu.