Share
Apprenez dans ce tutoriel comment créer un portefeuille filtrable avec jQuery intégré à WordPress. N'oubliez pas que ce type de portefeuille peut faire une grande différence pour vos thèmes.!
Vous pouvez utiliser le code de ce didacticiel dans n’importe quel thème que vous avez créé ou que vous créez, nous suivrons des étapes simples et dans mon cas, j’utiliserai le code par défaut. Vingt onze thème et courir sur WordPress 3.3. Ok, travaillons!
Vous pouvez utiliser le code utilisé dans ce didacticiel dans n’importe quel thème créé ou en cours de création..
Nous devrons créer une section sur la barre d’administration appelée Projet, dans cette section, vous créerez toutes les entrées du portefeuille avec leurs la vignette et lien de démonstration.
Ouvrez le functions.php fichier et à la fin, créons une fonction pour enregistrer l'élément de projet. (Vous pouvez voir la fonction complète à la fin de cette étape)
Accentsconagua
add_action ('init', 'project_custom_init'); / * SECTION - project_custom_init * / function project_custom_init () // le code restant va ici / * #end SECTION - project_custom_init - * / Dans ce code, nous utilisons le add_action fonction de sorte que lorsque WordPress commence à charger notre fonction sera appelée.
Dans la fonction project_custom_init ajoutons le code qui enregistre un Type de message personnalisé appelé Projet.
// Voici tous les noms. Dans notre tutoriel, nous utilisons "Projet" $ labels = array ('name' => _x ('Projets', 'nom général du type de post'), 'singular_name' => _x (' Projet ',' nom singulier de type de publication '),' add_new '=> _x (' Ajouter nouveau ',' projet '),' add_new_item '=> __ (' Ajouter un nouveau projet '),' edit_item '=> __ (' Modifier le projet '),' new_item '=> __ (' Nouveau projet '),' view_item '=> __ (' Afficher le projet '),' search_items '=> __ (' Rechercher des projets '),' not_found '=> __ ('Aucun projet trouvé'), 'not_found_in_trash' => __ ('Aucun projet trouvé dans la corbeille'), 'parent_item_colon' => ", 'nom_menu' => 'Portfolio") // Quelques arguments et à la dernière ligne 'prend en charge', nous disons à WordPress quelles fonctionnalités sont prises en charge sur le post du projet type $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true , 'show_in_menu' => vrai, 'query_var' => vrai, 'rewrite' => vrai, 'type_papacité' => 'posté', 'has_archive' => vrai, 'hiérarchique' => faux, 'menu_position' => null, 'supports' => array ('title', 'ed itor ',' auteur ',' vignette ',' extrait ',' commentaires ')); // On appelle cette fonction pour enregistrer le type de message personnalisé register_post_type ('project', $ args); Le code ci-dessus ajoutera un élément dans le menu Admin appelé Portefeuille et ce sera dans cette section que nous allons créer tous les éléments du portefeuille.
Maintenant, dans la fonction, ajoutons plus de code.
// Initialize Taxonomy Labels $ labels = array ('name' => _x ('Tags', 'nom générique de taxonomie'), 'singular_name' => _x ('Tag', 'taxonomie nom singulier'), 'search_items' = > __ ('Types de recherche'), 'all_items' => __ ('Tous les tags'), 'parent_item' => __ ('Balise parent'), 'parent_item_colon' => __ ('Balise parent:'), ' edit_item '=> __ (' Edit Tags '),' update_item '=> __ (' Mettre à jour la balise '),' add_new_item '=> __ (' Ajouter une nouvelle balise '),' new_item_name '=> __ (' Nouveau nom de balise '),); // Enregistrer une taxonomie personnalisée register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, // définir s'il faut utiliser un système tel que des balises ou des catégories 'labels' => $ labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array ('slug' => 'tag-portfolio'),)); Attention à l'argument 'hiérarchique' sur le register_taxonomy fonction, si vous tapez vrai vous aurez un système comme des catégories pour vos éléments de portefeuille, mais si vous tapez faux vous aurez un système comme des balises. Je préfère le système de style de catégorie.
Oh oui! le fonction project_custom_init () est fini! Voir ci-dessous pour le code complet de cette fonction.
add_action ('init', 'project_custom_init'); / * - Début de publication personnalisée - * / function project_custom_init () $ labels = array ('name' => _x ('Projets', 'nom général de type de publication' '),' singular_name '=> _x (' Project ',' post type nom singulier '),' add_new '=> _x (' Ajouter nouveau ',' projet '),' add_new_item '=> __ (' Ajouter nouveau projet '),' edit_item '=> __ (' Modifier Projet '),' new_item '=> __ (' Nouveau projet '),' view_item '=> __ (' Afficher le projet '),' search_items '=> __ (' Rechercher des projets '),' not_found '=> __ ( 'Aucun projet trouvé'), 'not_found_in_trash' => __ ('Aucun projet trouvé dans la corbeille'), 'parent_item_colon' => ", 'nom_menu' => 'Projet'); $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'entraineur' 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array ('title', 'editor', 'author', 'thumbnail', 'extrait ',' comments ')); // Ce qui suit est l'étape principale où nous enregistrons la publication. register_post_t ype ('projet', $ args); // Initialize New Taxonomy Labels $ labels = array ('name' => _x ('Tags', 'nom générique de taxonomie'), 'singular_name' => _x ('Tag', 'taxonomie nom singulier'), 'search_items' => __ ('Types de recherche'), 'all_items' => __ ('Toutes les balises'), 'parent_item' => __ ('Balise parent'), 'parent_item_colon' => __ ('Balise parent:'), 'edit_item' => __ ('Modifier les balises'), 'update_item' => __ ('Balise de mise à jour'), 'add_new_item' => __ ('Ajouter une nouvelle balise'), 'new_item_name' => __ ('Nouvelle balise Prénom' ), ); // Taxonomie personnalisée pour les balises de projet register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, 'labels' => $ labels, 'show_ui' => true, 'query_var' => true , 'rewrite' => array ('slug' => 'tag-portfolio'),)); / * - Fin personnalisée post-init - * / Si vous allez à l’administrateur maintenant, vous verrez un nouvel élément dans le menu appelé Portefeuille comme l'image ci-dessous:
Créons une nouvelle fonction qui garantira que les messages intéressants sont affichés lorsque l'utilisateur, par exemple, crée un nouvel élément dans le portefeuille ou quelque chose du genre..
Le code ci-dessous doit être tapé sous notre dernière fonction et pas dedans.
/ * --- Messages personnalisés - project_updated_messages --- * / add_filter ('post_updated_messages', 'project_updated_messages'); function project_updated_messages ($ messages) global $ post, $ post_ID; $ messages ['project'] = array (0 => ", // inutilisé. Les messages commencent à l’indice 1. 1 => sprintf (__ ('Projet mis à jour. Afficher le projet'), esc_url (get_permalink ($ post_ID))) , 2 => __ ('Champ personnalisé mis à jour.'), 3 => __ ('Champ personnalisé supprimé.'), 4 => __ ('Projet mis à jour.'), / * Traducteurs:% s: date et heure de la révision * / 5 => isset ($ _GET ['révision'])? sprintf (__ ('Projet restauré à partir de% s'), wp_post_revision_title ((int) $ _GET ['révision'], false)): false, 6 => sprintf (__ ('Projet publié. Afficher le projet'), esc_url (get_permalink ($ post_ID))), 7 => __ ('Projet enregistré.'), 8 => sprintf (__ ('Projet soumis . Preview projet '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID))), 9 => sprintf (__ (' Projet prévu pour: % 1 $ s. Projet de prévisualisation '), // traducteurs: format de date de la boîte de publication, voir http://php.net/date date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ ('Projet brouillon mis à jour. Projet prévisualisé'), esc_url (add_query_arg ('preview', 'true', get_permalink ($ post_ID)))),); renvoyer $ messages; / * --- #end SECTION - message_updated_messages --- * / Cette fonction crée des messages personnalisés pour quand un utilisateur modifie la publication de portefeuille, voir un exemple de message sur l'image ci-dessous:
Vous pouvez voir qu'avec ce code, vous pouvez ajouter des balises / catégories à votre portefeuille et créer de nouveaux éléments! Mais ajoutons plus d'une fonctionnalité, bonne idée? Sûr!
Dans cette étape, nous allons ajouter une méta-boîte sur l’écran de création d’élément de portefeuille dans laquelle l’utilisateur peut coller un fichier. URL du site Web ou d'une autre page.
Créons trois fonctions pour ajouter cette méta-boîte où nous allons enregistrer notre URL pour l'élément de portefeuille. Le code passe en dessous de la dernière fonction que nous avons créée.
/ * --- Méta-boîte d'URL de démonstration --- * / add_action ('admin_init', 'portfolio_meta_init'); function portfolio_meta_init () // ajoute une meta-box pour le type de projet 'projet' de WordPress add_meta_box ('portfolio_meta', 'Infos projet', 'portfolio_meta_setup', 'projet', 'côté', 'bas'); // ajoute une fonction de rappel pour sauvegarder les données saisies par un utilisateur dans add_action ('save_post', 'portfolio_meta_save'); function portfolio_meta_setup () global $ post; ?>
'; function portfolio_meta_save ($ post_id) // cocher nonce si (! isset ($ _ POST ['meta_noncename']) ||! wp_verify_nonce ($ _ POST ['meta_noncename'], __FILE__)) return $ post_id; // vérifie les capacités if ('post' == $ _POST ['post_type']) if (! current_user_can ('edit_post', $ post_id)) return $ post_id; elseif (! current_user_can ('edit_page', $ post_id)) return $ post_id; // quitter lors de l'enregistrement automatique si (défini ('DOING_AUTOSAVE') == DOING_AUTOSAVE) return $ post_id; if (isset ($ _ POST ['_url'])) update_post_meta ($ post_id, '_url', $ _POST ['_url']); else delete_post_meta ($ post_id, '_url'); / * --- #end méta-boîte d'URL de démo --- * / Je ne vais pas expliquer en détail ce code car vous pouvez en apprendre davantage sur les méta-boîtes dans ce tutoriel: Méta-boîtes personnalisées réutilisables ou tout simplement faire une petite recherche dans WordPress Codex ou sur Google..
Le code ci-dessus crée simplement une méta-boîte avec un champ où l'utilisateur peut taper une URL. Nous avons besoin de toutes ces fonctions, la première n’initialise que la boîte méta, la seconde le code de la boîte méta et la dernière une fonction de sauvegarde des données..
D'accord! Après cela, nous pouvons passer à l’étape suivante et travailler sur le front-end, car le back-end est terminé! Nous ajouterons ensuite le contenu après.
Nous allons maintenant montrer les entrées de notre portefeuille à l'utilisateur! Mais commençons par créer des catégories et ensuite ajouter des éléments au portefeuille.
Dans ce tutoriel, je vais utiliser une mise en page de portefeuille à deux colonnes, avec quelques ajustements sur le balisage et CSS, vous pouvez créer beaucoup de mises en page!
Quelques astuces pour créer un élément de portefeuille
Ok, la première chose à faire maintenant est de créer un nouveau Modèle de page appelé "Portfolio 2 Colonnes", alors allons-y!
Tout d'abord, dupliquez le page.php fichier. Puis renommez le en page_portfolio_2c.php.
Nous devons éditer ce nouveau fichier et coller le code ci-dessous sur la première ligne du fichier:
Cela affichera une nouvelle option sur l'écran de création de la page, mais rappelez-vous que ce code DOIT être collé sur la première ligne du fichier!
Maintenant, effacez tout le contenu à l'intérieur du contenu div, dans ce tutoriel, j'utilise le Vingt onze thème et après avoir effacé, j'ai ce code dans mon fichier:
Si vous utilisez votre propre thème, effacez alors toutes les lignes qui récupèrent le contenu de votre page, comme the_content () par exemple. Nous allons créer du code personnalisé, alors ne laissez pas d'autre code ici, dans la page du portefeuille, nous avons juste besoin de vos projets.!
Maintenant, allez dans WordPress Admin et créez une nouvelle page appelée "Portfolio" et n'oubliez pas de sélectionner "Portfolio 2 Colonnes" dans le champ Modèle, comme sur l'image ci-dessous..
Ajoutez simplement un titre et laissez le contenu vide, nous n'en avons pas besoin.
Si vous essayez d'accéder à la page maintenant, vous n'obtiendrez que l'en-tête, le pied de page et le contenu vierge. Alors, ajoutons de la vie à notre portefeuille filtrable!
Parlons un peu du plugin que nous utiliserons pour rendre le portefeuille.
Dans ce tutoriel, je vais utiliser un plugin appelé Filterable, ce plugin a été créé par GetHifi..
Ce plugin a été écrit sans le mode de compatibilité de jQuery. Je viens donc de le changer et la version qui fonctionne correctement avec WordPress se trouve dans le fichier de code source de ce tutoriel..
Le plugin est un peu vieux, pour être plus exact, c'est à partir de 2009, mais c'est sur Licence MIT, afin que vous puissiez utiliser sur des thèmes premium, des sites commerciaux et où que vous soyez.
Il suffit de télécharger le script modifié qui se trouve sur le code source (lien sur le dessus du didacticiel) et commençons! Si vous aimez, visitez la page d'accueil pour obtenir plus de détails à ce sujet.
Utiliser Filterable est très simple! La première étape consiste à utiliser le bon balisage, le plugin attend un balisage comme dans l'exemple ci-dessous:
Ici nous avons les éléments de filtre, lorsque nous cliquons sur l'un de ces liens, alors toute la magie se produira. Important: toutes les entrées auront besoin d'une classe avec le même texte dans les attributs 'href' et 'rel'.
Et maintenant, nous avons le balisage des éléments de portefeuille:
Important: Ce qui compte vraiment ici, c'est que tous les éléments (li) doivent se trouver dans un (ul), autrement dit, ils doivent être emballés. Notez que nous utilisons un div aussi, nous l'utilisons parce que nous «flottons» le li éléments, il est donc important d'avoir un autre wrapper et un division claire éviter les problèmes de rupture de structure.
Après cela, nous devrons appeler le filtrable script dans notre fichier functions.php et initialiser le portefeuille filtrable en appelant le Filtrable () fonction, comme le code ci-dessous:
Mais pour l'instant, nous allons ajouter notre balise personnalisée à l'intérieur du li, mais, nous aurons besoin de générer tous les filtres et noms de classes avec PHP pour obtenir toutes les catégories, les entrées de portefeuille et tous les autres détails de WordPress! Allons travailler!
Revenons à la page_portfolio_2c.php fichier et écrire le filtre de portefeuille. Le code ressemble en réalité au code ci-dessous:
Nous devons obtenir tous les termes / catégories de WordPress, éditer quelques noms à utiliser dans l'attribut de classe et imprimer ul pour le modèle requis.
Nous allons taper le code suivant à l'intérieur du #content div:
'; écho '
Le code ci-dessus générera un ul avec l’élément par défaut 'Tous', et faites une boucle sur les termes pour imprimer toutes les autres catégories avoir des entrées. Faisons une explication plus détaillée:
Tout d'abord, nous créons une variable appelée $ terms, et nous utilisons le get_terms () fonction qui retourne un tableau avec tous les termes. En tant que paramètre, la fonction nécessite une chaîne ou un tableau de chaînes avec le nom de la taxonomie, nous passons tagportfolio, c'est le nom que nous avons utilisé dans notre functions.php fichier. Vous pouvez obtenir des informations plus détaillées sous get_terms () dans le Codex WordPress.
Ensuite, nous créons une variable appelée $ count et utilisons le compter() fonction pour obtenir le nombre total d’éléments dans le tableau, nous imprimons le balisage par défaut et le Tout article.
Après cela, nous vérifions si la variable $ count est supérieure à zéro, si oui, nous avons au moins une catégorie avec des éléments à imprimer.
À l’intérieur de if, nous créons une boucle foreach pour obtenir toutes les valeurs du tableau, et créons un autre élément li pour chaque élément du tableau $ terms.
À l'intérieur de foreach, nous créons une variable appelée $ termname pour stocker le nom de terme. N'oubliez pas que nous changeons le texte en minuscules, car cette variable sera utilisée dans l'attribut de classe..
Ensuite, nous remplaçons tout espace blanc par un - en utilisant le str_replace fonction, cette ligne vous permettra d’utiliser des catégories / termes avec plus d’un mot, comme "Thèmes WordPress" par exemple.
Et enfin, nous imprimons un li élément et utiliser nos variables pour imprimer les données au bon endroit.
Si vous testez maintenant, vous verrez une liste de catégories / termes avec les noms que vous avez créés dans WordPress Admin. Maintenant, travaillons sur les objets.
Maintenant affichons les éléments du portefeuille, nous devons le faire en suivant le modèle requis montré ci-dessus.
Nous allons le faire en ajoutant simplement le code ci-dessous:
'projet', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> nom; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); else: $ tax ="; fin si; ?>
">
">
"target =" _ blank "> Aperçu en direct →"> Plus de détails →
- Désolé, aucune entrée de portefeuille trouvée.
Beaucoup de lignes de code, non? Mais ne vous inquiétez pas, je vais vous expliquer le code.
La première étape est de créer une requête personnalisée, nous le faisons avec Fonction WP_Query, Je passe en paramètre le type de message personnalisé "projet", que nous avons créé sur functions.php fichier. Cette requête obtiendra tous les projets que vous avez créés.
Ensuite, je fais une boucle comme nous le faisons normalement avec post-exposition, par exemple.
Pendant ce temps, nous faisons le même processus que lors de la création du filtre, mais ici nous créons un tableau appelé liens où nous allons stocker tous les termes de la publication. Notez que maintenant, au-delà du nom de taxonomie, nous passons l'ID de poste dans get_the_terms ().
Ensuite, nous utilisons joindre et créer une chaîne unique avec tous les éléments du tableau, si les termes de publication sont "WordPress" et "Design", la variable $ tax sera égale à "wordpress design", nous l'utilisons pour ajouter les bonnes classes afin de permettre au portefeuille être filtrable.
Si le message ne contient pas de termes, nous définissons simplement $ tax égal à une chaîne vide.Après cela, nous créons une variable appelée $ infos où nous obtiendrons l’URL de la démonstration à partir de notre champ de publication personnalisé créé dans le répertoire. functions.php fichier
Ensuite, nous imprimons simplement le balisage du modèle et utilisons des fonctions telles que get_the_excerpt (), the_post_thumbnail (notez que vous pouvez modifier les dimensions pour les adapter à votre présentation, si vous souhaitez par exemple créer un portefeuille de trois colonnes).
Si vous mettez à jour la page, vous verrez tous les éléments énumérés, mais le filtre ne fonctionne toujours pas. Corrigeons-le!
Utiliser Filterable dans WordPress
Maintenant, utilisons notre plugin. L'avez-vous déjà téléchargé? Si oui, copiez et collez le filterable.js déposer à l'intérieur du js / dossier.
dans le functions.php fichier, ajoutons la bibliothèque jQuery à la balise 'head' en premier. Pour ce faire, nous utiliserons une fonction personnalisée et le wp_enqueue_script une fonction.
function enqueue_filterable () wp_register_script ('filterable', get_template_directory_uri (). '/js/filterable.js', array ('jquery')); wp_enqueue_script ('filterable'); add_action ('wp_enqueue_scripts', 'enqueue_filterable');Maintenant, revenons à la page_portfolio_2c.php fichier et en dessous du dernier code ajouté mais à l'intérieur du contenu div, ajoutez le code suivant:
Cela relie uniquement le plugin à la page et appelle le Filtrable () fonction pour rendre notre portefeuille filtrable.
Code complet
'; écho 'Tout '; if ($ count> 0) foreach ($ term as $ term) $ termname = strtolower ($ term-> name); $ termname = str_replace (", '-', $ termname); echo ''. $ term-> name.' '; écho "";?> 'projet', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> nom; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); else: $ tax ="; fin si; ?>
">
">
"target =" _ blank "> Aperçu en direct →"> Plus de détails →
- Désolé, aucune entrée de portefeuille pour tout.
Étape 5: du style
Maintenant que nous avons codé tout ce dont nous avons besoin, ajoutons un peu de CSS à notre style.css fichier, si vous avez d'autres fichiers, ajoutez simplement le code.
/ * CLEARFIX ----------------------------------------------- * / .clearboth display: block; marge: 0; rembourrage: 0; clarifier les deux; / * STYLE DE FILTRE DE PORTEFEUILLE ---------------------------------------------------- --- * / # portfolio-filter list-style-type: aucun; # portfolio-filter li display: inline; padding-right: 10px; # portfolio-filter li a color: # 777; texte-décoration: aucun; # portfolio-filtre li. courant, # portfolio-filtre li: survol couleur: # 084a9a; / * STYLE DE LISTE DE PORTEFEUILLE ---------------------------------------------------- --- * / # portfolio-wrapper padding-bottom: 25px; # portfolio-list list-style-type: none; # portfolio-list .portfolio-item width: 400px; float: gauche; marge droite: 5px; # portfolio-list .portfolio-item h3 a color: # 084a9a; text-transform: majuscule; poids de police: gras; # portfolio-list .portfolio-item .excerpt text-align: justifier; taille de police: 14px; hauteur de ligne: 18px; padding-right: 15px; marge inférieure: 5px; # portfolio-list .portfolio-item .excerpt a color: # 555; # portfolio-list .portfolio-item .excerpt a: hover text-decoration: none;Maintenant, si vous testez à nouveau, vous obtiendrez un beau portefeuille filtrable! Wow, tout le travail est fait!
Conclusion
Et c'est fait! Vous savez maintenant comment créer un portefeuille filtrable avec un plugin gratuit jQuery que vous pouvez utiliser dans n'importe quel travail que vous effectuez..
!
