Appliquez l’effet FancyBox sur votre blog sans plugins.


Effet boîte fantaisie est un moyen élégant d’ajouter un zoom sur leurs images de publication.scénario boîte fantaisie est un script facile à utiliser qui peut être automatiquement appliqué à toutes les photos de votre blog. Regardons cela en détail.

Si vous cliquez sur l’image d’un article dans WordPress, un autre onglet s’ouvre avec une image dans le coin. Pas très sexy comme présentation.

En utilisant le script FancyBox, vous pourrez ouvrir des images en plein écran, centrées sur la même page. Ensuite, vous obtiendrez l’effet de surimpression.

  • Étape 1 : Téléchargez le script.

Vous pouvez télécharger la dernière version du script ici : http://fancyapps.com/fancybox/#license.

  • Étape 2 : Copiez le script sur votre hébergeur.

Après la décompression, vous copiez le contenu du répertoire source sur votre hôte. Même si tous les fichiers ne sont pas utilisés, il est recommandé de copier l’intégralité du répertoire.

Vous devez copier le contenu du répertoire source dans le répertoire de votre thème WordPress, par ex. /public_html/wp-content/themes/votre_thème/.

Pour ce tutoriel, j’ai créé un répertoire la sociétéou j’ai copié le contenu de mon répertoire source.

  • Étape 3 : Créez la fonctionnalité FancyBox pour WordPress.

ouvrir un fichier fonction.php ou équivalent à votre thème et copiez le script ci-dessous :

// ================================================ === = ================== // Fonction de l’effet FANCYBOX. // ================================================ === = ================== fonction wpc_js() { wp_register_style(‘fancybox-css’, get_template_directory_uri() . ‘/inc/jquery.fancybox.css’, array() , ‘1.0’, ‘all’); wp_register_script(‘fancybox’, get_template_directory_uri().’/inc/jquery.fancybox.pack.js’, ‘jquery’, ‘1.0’, true); if (is_single ()) { wp_enqueue_script(‘fancybox’); wp_enqueue_style(‘fancybox-css’); } }

Dans mon tutoriel, les fichiers sont placés dans le répertoire inc. Si vous utilisez un autre répertoire, n’oubliez pas de le modifier dans la fonction.

A Voir  Boîtes à graines, Plex et coffres numériques.

  • Étape 4 : appelez le script.

Cette étape comprend le chargement du script dans le pied de page de l’article et l’application automatique de l’effet à toutes les images qu’il contient.Nous utiliserons la fonction php que nous ajouterons au fichier fonction.php votre sujet (ci-dessus).

Copiez-y le script suivant :

/* Insertion de Fancybox sur le contenu */ function wpc_auto_fancy_box() { if (is_singular(‘post’)) { ?>

Pour que cette astuce fonctionne, vous devez modifier le nom de la classe CSS utilisée pour votre article (lignes 583 et 584, où la classe CSS est .single-content). Ce n’est pas un secret pour trouver un cours, il faut le faire soi-même ou contacter le développeur du thème.

Dans mon cas, j’ai utilisé Navigateur FirefoxJe vais sur un article de mon blog et je fais une clic-droit je choisis ChèqueEnsuite, je passe la souris sur une autre classe existante.

Pointillé (1) Vous indique quelle classe CSS est appliquée. Une fois que vous voyez le texte de votre article entouré de ces points, vous pouvez presque être sûr que la classe est correcte.Par exemple ici contenu unique (2).

Si vous avez un plugin de gestion de cache, n’oubliez pas de vider le cache avant d’envisager des modifications.

Ensuite, sur chaque image de votre blog, si vous cliquez sur une, vous aurez quelque chose comme ceci :

C’est un bel effet qui met en évidence les images dans les articles sans utiliser de plugin.

Source : http://wpchannel.com

c’est tout.