Paano Gumawa ng Social Sharing Buttons Sa GeneratePress?

Sa tutorial na ito, titingnan natin Paano Gumawa ng Social Sharing Buttons Sa GeneratePress?

Ito ay walang alinlangan na makakatulong sa iyo sa pagpapahusay ng cross-channel na promosyon ng iyong post sa blog. Iyon naman ay magpapalaki sa iyong presensya sa web.

Ipapakita ko sa iyo kung paano bumuo ng mga sticky social sharing button na lumulutang sa harap na dulo ng iyong mga entry sa blog. Ibig sabihin, palagi silang makikita ng iyong audience.

Maaabot namin ito sa pamamagitan ng isang plugin, ngunit ang pinakamagandang bahagi ay ang paggawa ng mga ito nang manu-mano. Sa ganoong paraan malalaman mo na iniiwasan mo ang pagdaragdag ng JavaScript (pumapatay sa pagganap ng website) sa iyong site.

Ang araling ito ay nangangailangan sa iyo na magkaroon ng GeneratePress premium, dahil gagamitin natin ang Elements module.

Gumawa ng Social Sharing Buttons Sa GeneratePress Nang Walang Plugin

Ang paggawa ng mga social sharing button sa GeneratePress na tema na walang mga plugin ay humihiling sa iyo na malaman ang tungkol sa mga icon ng SVG.

Ang mga SVG ay Scalable Vector Graphics. Ang mga ito ay bukas na karaniwang visual (pangunahing ginagamit bilang mga icon) na binuo ng W3C (World Wide Web Consortium) (World Wide Web Consortium).

Mga Benepisyo ng Paggamit ng mga SVG

• Mayroon silang maliit na laki ng file na hindi nakakaapekto sa bilis ng site.
• Madali kang magdagdag ng mga hyperlink sa mga icon ng SVG.
• Ang mga ito ay madaling mabago sa anumang vector graphics software.
• Ang mga icon ng SVG ay independiyenteng resolution, na ginagawa itong mahusay para sa desktop, tablet at mobile view.
• Ang mga larawang SVG ay mas SEO-friendly kumpara sa mga nakasanayang larawan.

Gagamitin namin ang mga SVG mula sa Iconmonstr. Ibig sabihin, hindi lang ang icon kundi ang icon na may XML code din.

Hakbang 1: Magdagdag ng Social Sharing Buttons Code Upang Bumuo ng Press Elements Hook

Para magawa ito, kakailanganin mo munang lumikha ng Bagong Elemento sa GeneratePress. Pumunta sa iyong WordPress Dashboard, sa ilalim ng Hitsura, Mag-click sa Mga Elemento. Bubuksan nito ang pahina ng Mga Elemento, mag-click sa Magdagdag ng Bagong Elemento.

Sa sandaling nag-click ka sa Magdagdag ng Bagong Elemento, GeneratePress magpapakita ng dialog window. Mag-click sa Hook. Iyan ay tumpak, kailangan mo ng GeneratePress custom hook para sa pagkilos na ito.

Bigyan ng pangalan ang bagong Element at idagdag ang code.

Piliin ang hook bilang bumuo pagkatapos ng header, isagawa ang PHP, at itakda ang mga panuntunan sa pagpapakita sa Mga Post – Lahat ng Mga Post.

Dahil kailangan namin ang mga social sharing icon upang lumutang sa aming screen viewport. Pinakamainam na ipaalam na piliin ang Bumuo ng Pagkatapos ng Header Hook.

Ang dahilan kung bakit pinili namin ang mga setting ng display bilang Lahat ng Mga Post ay dahil gusto mong ibahagi ng iyong mga user ang iyong nilalaman sa kanilang mga social site.

Huwag kalimutang pindutin ang button na I-publish.

Kopyahin ang sumusunod na code upang ipatupad ang pareho sa iyong website.

Hakbang 2: Magsagawa ng CSS Styling Sa Mga Icon ng Social Sharing

Upang gawin ito, pumunta sa WordPress dashboard, sa ilalim ng Hitsura, mag-click sa I-customize.

Bubuksan nito ang GeneratePress theme customizer. Dito pumunta sa ibaba at mag-click sa Karagdagang CSS.

I-paste ang sumusunod na CSS code para sa maihahambing na estilo. Pinapayagan kang ayusin ang CSS ayon sa iyong mga kinakailangan.

Hakbang 3: Panghuling resulta ng Mga Pindutan ng Social Sharing Sa GeneratePress

Sa wakas, narito kung paano ang panlipunang pagbabahagi ang mga icon ay dapat magmukhang sa iyong website. Tandaan na pinalutang namin ang mga ito mula sa itaas sa 70% ng viewport ng screen.

Mga Benepisyo ng Mga Pindutan ng Social Sharing Sa GeneratePress (Walang Plugin) (Walang Plugin)

Ang paggamit ng mga SVG mula sa Iconmonstr ay ginagawang napakagaan ng iyong mga icon
Walang anumang uri ng JavaScript code na kasangkot.

Sa paggamit ng diskarteng ito, hindi ka nag-i-install ng anumang 3rd party na plugin
Ito ay tumutugon.

Ang lahat ng mga pindutan ay gagana nang hindi kapani-paniwalang mabilis para sa layunin ng pagbabahagi.

Konklusyon: Paano Gumawa ng Social Sharing Buttons Sa GeneratePress?

Ngayon ay natuklasan mo na kung paano bumuo ng mga social sharing button sa GeneratePress gamit ang code at mga plugin.

Gamitin ang opsyon na madali para sa iyo at ang nakakatugon sa iyong pangangailangan. Mangyaring huwag mag-atubiling i-edit ang PHP at/o CSS code mula sa artikulo.