Butoane de distribuire socială fără plugin în tema GeneratePress

În acest articol, voi explica cum puteți implementa pictogramele de distribuire socială fără pluginuri. Există două moduri și două tipuri diferite de pictograme. Prima este pictogramele plutitoare, iar a doua este după pictogramele de postare.

Pictograma plutitoare va fi vizibilă pe întregul site și pe fiecare pagină, iar pictograma plutitoare nu va fi vizibilă în vizualizarea mobilă, iar când vine vorba de după o postare, atunci este clar că pictograma de distribuire socială va fi vizibilă după fiecare postare , deci citiți articolul cu mare atenție, astfel încât puteți adăuga pictograme de distribuire socială pe site-ul dvs. fără nici un singur plugin.

Voi împărtăși câteva coduri PHP și CSS ale ambelor pictograme pe care trebuie să le implementați vizionând videoclipul meu.

Pictograme flotante de distribuire socială (remediată pentru întregul site)

Cod PHP pentru pictograme flotante de distribuire socială

 <?php $webinsightsURL = urlencode(get_the_permalink()); $webinsightsTitle = urlencode(get_the_title()); $webinsightsImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?> <div class="webinsights-float-social-wrapper hide-on-mobile hide-on-tablet"> <a class="webinsights-float-social-sharing webinsights-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webinsightsURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a> <a class="webinsights-float-social-sharing webinsights-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webinsightsTitle;?>&amp;url=<?php echo $webinsightsURL;?>&amp;via=webinsights" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a> <a class="webinsights-float-social-sharing webinsights-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webinsightsURL; ?>&amp;media=<?php echo $webinsightsImage; ?>&amp;description=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a> <a class="webinsights-float-social-sharing webinsights-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webinsightsURL; ?>&amp;title=<?php echo $webinsightsTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a> <a class="webinsights-float-social-sharing webinsights-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webinsightsTitle; echo " "; echo $webinsightsURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a> <a class="webinsights-float-social-sharing webinsights-social-reddit" href="https://reddit.com/submit?url=<?php echo $webinsightsURL;?>&title=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a> </div>

Cod CSS pentru pictogramele flotante de distribuire socială

 /* Entire Site Social Share Design by web insights*/ .webinsights-float-social-wrapper { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9999; } .webinsights-float-social-sharing { display: flex; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; min-height: 30px; font-size: 12px; padding: 14px 10px; } .webinsights-float-social-sharing:first-of-type { border-top-right-radius: 10px; } .webinsights-float-social-sharing:last-of-type { border-bottom-right-radius: 10px; } .webinsights-social-facebook { fill: #fff; background-color: rgba(59, 89, 152, 1); } .webinsights-social-facebook:hover { background-color: rgba(59, 89, 152, .8); } .webinsights-social-twitter { fill: #fff; background-color: rgba(29, 161, 242, 1); } .webinsights-social-twitter:hover { background-color: rgba(29, 161, 242, .8); } .webinsights-social-pinterest { fill: #fff; background-color: rgba(189, 8, 28, 1); } .webinsights-social-pinterest:hover { background-color: rgba(189, 8, 28, .8); } .webinsights-social-linkedin { fill: #fff; background-color: rgba(0, 119, 181, 1); } .webinsights-social-linkedin:hover { background-color: rgba(0, 119, 181, .8); } .webinsights-social-whatsapp { fill: #fff; background-color: rgba(37, 211, 102, 1); } .webinsights-social-whatsapp:hover { background-color: rgba(37, 211, 102, .8); } .webinsights-social-reddit { fill: #fff; background-color: rgba(255, 87, 0, 1); } .webinsights-social-reddit:hover { background-color: rgba(255, 87, 0, .8); }

Acesta este modul în care puteți adăuga pictograme plutitoare de distribuire socială pe site-ul dvs. Acum Următorul este după pictogramele post-partajare.

După postarea pictogramelor de distribuire socială

Cod PHP pentru pictogramele de partajare socială după postare

 <?php $webinsightsURL = urlencode(get_the_permalink()); $webinsightsTitle = urlencode(get_the_title()); $webinsightsImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?> <div class="webinsights-social-wrapper"> <span class="hide-on-mobile">Sharing Is Caring:</span> <a class="webinsights-social-sharing webinsights-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webinsightsURL; ?>" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/> </svg> </a> <a class="webinsights-social-sharing webinsights-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webinsightsTitle; echo " "; echo $webinsightsURL;?>" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/> </svg> </a> <a class="webinsights-social-sharing webinsights-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webinsightsTitle;?>&amp;url=<?php echo $webinsightsURL;?>&amp;via=webinsights" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> </svg> </a> <a class="webinsights-social-sharing webinsights-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webinsightsURL; ?>&amp;media=<?php echo $webinsightsImage; ?>&amp;description=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/> </svg> </a> <a class="webinsights-social-sharing webinsights-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webinsightsURL; ?>&amp;title=<?php echo $webinsightsTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/> </svg> </a> <a class="webinsights-social-sharing webinsights-social-reddit" href="https://reddit.com/submit?url=<?php echo $webinsightsURL;?>&title=<?php echo $webinsightsTitle; ?>" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/> </svg> </a> </div>

Cod CSS pentru pictogramele de distribuire socială după postare

 /* After Post Social Share Design by web insights*/ .webinsights-social-wrapper { margin: 30px 0; font-size: 0; } .webinsights-social-wrapper span { font-weight: bold; padding-right: 10px; font-size: 16px; } .webinsights-social-sharing { font-size: 17px; padding: 7px 20px; } @media only screen and (max-width: 600px) { .webinsights-social-sharing { font-size: 17px; padding: 6px 17px; display: inline-block; } .webinsights-social-wrapper { margin: 30px 0px; font-size: 0; } } .webinsights-social-sharing svg { position: relative; top: 0.15em; display: inline-block; } .webinsights-social-sharing:first-of-type { border-radius: 100px 0 0 100px; } .webinsights-social-sharing:last-of-type { border-radius: 0 100px 100px 0; } .webinsights-social-facebook { fill: #fff; background-color: rgba(59, 89, 152, 1); } .webinsights-social-facebook:hover { background-color: rgba(59, 89, 152, .8); } .webinsights-social-twitter { fill: #fff; background-color: rgba(29, 161, 242, 1); } .webinsights-social-twitter:hover { background-color: rgba(29, 161, 242, .8); } .webinsights-social-pinterest { fill: #fff; background-color: rgba(189, 8, 28, 1); } .webinsights-social-pinterest:hover { background-color: rgba(189, 8, 28, .8); } .webinsights-social-linkedin { fill: #fff; background-color: rgba(0, 119, 181, 1); } .webinsights-social-linkedin:hover { background-color: rgba(0, 119, 181, .8); } .webinsights-social-whatsapp { fill: #fff; background-color: rgba(37, 211, 102, 1); } .webinsights-social-whatsapp:hover { background-color: rgba(37, 211, 102, .8); } .webinsights-social-reddit { fill: #fff; background-color: rgba(255, 87, 0, 1); } .webinsights-social-reddit:hover { background-color: rgba(255, 87, 0, .8); }

Așadar, puteți adăuga o pictogramă de distribuire socială fără pluginuri în tema generapress premium.

Implementați același mod pe site-ul dvs. și ștergeți pluginul pentru pictograma de distribuire socială. În acest fel, puteți îmbunătăți viteza site-ului dvs.

Anunțați-mă dacă vă confruntați cu probleme în secțiunea de comentarii. Cu siguranță voi răspunde și voi răspunde la întrebări, mulțumesc pentru că ați citit acest articol, unde am împărtășit modul de a seta pictograme, de fapt, pictograme de distribuire socială gratuit și fără niciun plugin.