sharebar flottant hébergement wordpress

Ceci est un tutoriel de niveau intermédiaire pour les développeurs WordPress intéressés à ajouter une boîte à part verticale flottante sur leur site WordPress. J'ai passé la meilleure partie d'un jour en essayant de trouver la boîte de partage parfaite pour WordPress et constaté que la plupart ne fonctionnerait pas dans Internet Explorer et Firefox. Eh bien, disons simplement qu'ils ne travailleraient pas dans Internet Explorer. La plupart d'entre eux travaillent trouvent dans Firefox de mon expérience. Cependant, au lieu d'utiliser l'un de ceux déjà disponibles sur Internet, j'ai décidé de développer mon propre parce que ceux que je trouvais étaient trop complexes et donc ne fonctionnerait pas comme vous les attendre à. Donc, si vous voulez une simple boîte de partage que vous pouvez construire à plus tard et qui fait travailler sur tous les navigateurs populaires, alors vous avez trouvé le tutoriel qui va le faire.

Pourquoi ne pas utiliser WordPress Partager Boîte Plugins

Le principal argument contre l'utilisation d'un plugin WordPress pour une boîte à part verticale flottante ou une boîte de part pour cette question, est que trop de plugins ralentissent votre site. Ceci est une tâche assez simple, alors pourquoi utiliser un plugin? La réponse est simple. Ne pas. Suivez ce tutoriel facile à lire et je vais vous avoir et en cours d'exécution avec une belle boîte à part flottante verticale rien de temps.

Conditions préalables

Il n'y a pas vraiment beaucoup que vous devez savoir avant d'essayer ce tutoriel. Il vous aidera à se familiariser avec cependant l'admin WordPress et HTML. A part cela, il suffit de suivre le long et amusez-vous!

Développez votre boîte Partager flottant HTML

Ouvrez votre éditeur de texte favori pour le codage et commencer un nouveau fichier html. Vous ajouterez le code HTML d'abord, puis les styles annexant CSS ci-dessus, donc nous allons commencer par les os nus conteneurs HTML comme dans l'exemple suivant:

C'est votre structure de base ci-dessus. Maintenant, allez à chaque site respectif et saisissez votre code de bouton. Voici les instructions simples que j'ai fait le mien:

1. Aller à https://twitter.com/about/resources/buttons#tweet et saisir un bouton twitter. J'ai utilisé le bouton « partager un lien » parce qu'il convient si agréable dans la barre latérale verticale j'ai créé. Si vous sélectionnez un autre bouton, vous devrez peut-être faire votre widget plus que moi.
2. Aller à https://developers.facebook.com/docs/reference/plugins/like/ et obtenir un Facebook comme le bouton. J'ai choisi de quitter le vide URL car la valeur par défaut de la page, il est allumé. Ensuite, je Désélectionné bouton envoyer, largeur réglée à 50 et ai cliqué obtenir le code. Vous verrez qu'il ya deux morceaux de code dans la fenêtre qui apparaît. les deux Grab et les coller l'un après l'autre entre vos balises de commentaire Facebook dans ce qui précède la mise en page d'exemple HTML.
3. Aller à https://developers.google.com/+/plugins/+1button/ et obtenir un bouton Google, Plus 1. Je défile en bas de la page où il est dit « un simple bouton » et utilisé l'extrait simple code court il trouvé pour ma boîte de part et cela a fonctionné très bien. Vous pouvez expérimenter avec les options que pour votre propre boîte de partage personnalisé.

Tout ce que vous avez à faire avec les trois étapes ci-dessus est de saisir le code et passé, il entre les balises de commentaire respectifs pour chacun des trois boutons de partage. Une fois cela fait, ajoutez votre style CSS comme je l'expliquerai suivante.

Ajout de styles CSS à votre boîte flottant Partager HTML

Ajouter le style suivant au début de votre document HTML et modifier comme vous le souhaitez:

Une fois que vous avez terminé avec copier et coller le style ci-dessus dans la partie supérieure de votre document HTML, enregistrez-le sous sharebox.html ou quel que soit le nom du fichier que vous désirez. Suivez ensuite les instructions de la section suivante pour le télécharger dans votre blog WordPress.

Ajout d'un partage Boîte Sidebar Widget dans WordPress

La façon dont j'ai décidé d'aborder ma boîte à part flottante verticale était d'ajouter un widget barre latérale de mon admin WordPress. Suivez ces trois étapes faciles pour commencer:

1. Connectez-vous à votre admin WordPress
2. Cliquez sur Apparence et puis Widgets
3. Sous les widgets disponibles dans la colonne de gauche, cliquez et faites glisser un widget texte sur la principale zone de barre latérale dans la colonne de droite. Copiez et collez le code HTML plus tôt dans la principale zone de texte et économisez.

C'est tout! Vous avez terminé! Cela a été facile non? Allez-y et consulter votre site et consultez votre widget barre latérale avec la barre d'actions flottantes. Il devrait fonctionner très bien si vous avez suivi le long assez bien. Sinon, revenez en arrière et trouver vos erreurs et essayez à nouveau. Voici ce que le mien ressemblait quand je fait:

Bien sûr, vous pouvez toujours ajouter d'autres boutons de partage à votre propre boîte de parts. Ce ne sont que ceux que je préfère.

Eh bien, je l'espère vous avez eu du plaisir avec ce tutoriel sur la construction et l'ajout d'un fichier HTML flottant boîte à part verticale sur votre blog ou site web WordPress. Les instructions sont assez simple, je l'espère pour que chacun puisse suivre et développer une boîte de part de travail pour leur site WordPress. Amusez-vous à vous peaufinage pour répondre à vos besoins. Ce tutoriel devrait certainement vous aider à rouler la balle.

Articles Liés

Description Widget Customizer est un simple plugin pour WordPress qui styles vos widgets en quelques secondes! Coloriser vos widgets, définir leur couleur de fond, la couleur du titre, du texte et des liens, avec ou sans ...

Comment ajouter des bannières aux sites WordPress Aujourd'hui publicité est partie essentielle de la plupart des sites Web sur Internet. Dans ce tutoriel, nous allons vous montrer comment ajouter des bannières à différentes parties ...

Comment faire pour installer WordPress WordPress, comme l'un des plus CMSs convivial en ligne, a été téléchargé des millions de milliers de fois partout dans le monde. Il est facile à comprendre l'interface, ...

Description Les professionnels de médias sociaux utilisent OnlyWire pour lancer des campagnes de médias sociaux, développer leurs partisans et publier du contenu sur les réseaux haut médias sociaux. Une fois que vous téléchargez et activez le ...

Beaucoup de conversations se déplace loin des sites Web traditionnels et les commentaires de blog aux médias sociaux. Souvent, en écrivant un article, je voudrais faire référence à une discussion qui se passe sur Facebook, ...