Boutons de partage social sans plugin dans le thème GeneratePress

Dans cet article, je vais vous expliquer comment vous pouvez implémenter des icônes de partage social sans plugins. Il existe deux façons et deux types d'icônes différents. Le premier est des icônes flottantes, et le second est après les icônes de publication.

L'icône flottante sera visible sur l'ensemble du site et sur chaque page, et l'icône flottante ne sera pas visible sur la vue mobile, et lorsqu'il s'agira d'après une publication, il est clair que l'icône de partage social sera visible après chaque publication , alors lisez très attentivement l'article de cette façon, vous pouvez ajouter des icônes de partage social sur votre site Web sans aucun plugin.

Je partagerai du code PHP et CSS des deux icônes que vous devez implémenter en regardant ma vidéo.

Icônes flottantes de partage social (fixes pour l'ensemble du site Web)

Code Php pour les icônes flottantes de partage 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>

Code CSS pour les icônes flottantes de partage 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); }

C'est ainsi que vous pouvez ajouter des icônes flottantes de partage social à votre site Web. Now Next est après les icônes de post-partage.

Après les icônes de partage social

Code Php pour les icônes de partage social après la publication

 <?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>

Code CSS pour les icônes de partage social After Post

 /* 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); }

Voici donc comment vous pouvez ajouter une icône de partage social sans plugins dans le thème premium generatepress.

Implémentez la même manière sur votre site Web et supprimez votre plugin d'icône de partage social. De cette façon, vous pouvez améliorer la vitesse de votre site Web.

Faites-moi savoir si vous rencontrez des problèmes dans la section des commentaires. Je vais certainement répondre et répondre aux questions merci d'avoir lu cet article où j'ai partagé la façon de définir des icônes en fait des icônes de partage social gratuitement et sans aucun plugin.