Good Contents Are Everywhere, But Here, We Deliver The Best of The Best.Please Hold on!
Data is Loading...
Tutoriels, WordPress

Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?

Bonjour mes petites myrtilles. Aujourd’hui c’est tutoriel ACF (Advanced Custom Fields = Ajouter des champs personnalisés). Lors d’un projet WordPress pour une cliente, j’ai dû ajouter des champs personnalisés à son portfolio, pour qu’à chaque fois qu’elle veuille poster dans son portfolio, elle puisse rentrer certaines informations complémentaires comme le nom du photographe, le nom de la styliste, cela très facilement.

ACF : le plugin

Avant tout, il faut installer et activer le plugin sur votre WordPress . Sans quoi, cela risque d’être bien compliqué ;). Une fois que l’extension est bien installée et activée, vous apercevrez un nouvel onglet dans la barre de menu de votre back office WordPress. Celle-ci affiche une roue dentée avec ACF.

Les démarches à suivre

1 – Création du groupe de champs

[list style= »style4″] [li]Cliquez sur ACF et vous arriverez sur la page permettant de créer vos champs personnalisés. Cliquez sur AJOUTER qui se trouve à côté de GROUPES DE CHAMPS. Puis renseignez le nom de votre groupe de champs. Ici j’ai mis : Informations Portfolio Projets.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous allez devoir créer les champs un par un pour avoir une liste qui ressemble à celle-ci. (Vous pouvez très bien n’avoir qu’un seul champ, tout dépend de ce dont vous avez besoin.)[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

2 – Création d’un champ personnalisé

[list style= »style4″] [li]Pour créer un champ personnalisé (ou plusieurs), il suffit simplement d’entrer certaines informations. Pour mon projet, j’ai seulement eu besoin d’entrer les informations suivantes : – Titre du champ : Styling – Nom du champ : (s’écrit automatiquement et vous sera utile plus tard) – Type de champ : Texte (Un champ de texte d’une ligne unique, limitation des caractères possible, j’ai donc choisi texte car c’est la meilleure option dans mon cas) – Requis : non (ce ne sera pas un champ obligatoire) – Texte de substitution : Name (dans la page de création d’un nouveau projet pour le portfolio, j’aurai donc un nouveau champ personnalisé « STYLING » qui apparaîtra sous l’éditeur de texte déjà présent).[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Très important pour pouvoir faire afficher votre champ personnalisé dans la page de création de votre projet portfolio ou d’article, il faut absolument ajouter une règle. Dans mon cas, j’ai demandé de montrer ce champ quand le type de publication est égal à « project ». Si le nom de votre portfolio est portfolio, dans ce cas vous mettrez que le type de publication est égal à portfolio. Si c’est pour votre blog ce sera surement post et si c’est pour une page de votre site alors ce sera page qu’il faudra choisir dans le menu déroulant.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Dans les options je vous conseille de ne rien cocher et de choisir l’option Standard (WP metabox) pour le style de votre champ. Visuellement ça vous parlera beaucoup plus. Une fois que tout est bien rempli, vous pouvez cliquer sur publier.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

3 – Vérification de l’intégration du champ dans la page souhaitée

[list style= »style4″] [li]Maintenant, vous allez vérifier que votre champ s’est bien installé à l’endroit souhaité. Faites comme si vous vouliez poster un nouveau projet ou un nouvel article.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous devriez retrouver votre groupe de champs sous l’éditeur principal. (Si ce n’est pas le cas, vous avez surement dû faire une erreur quelque part… un oubli de publication du groupe peut-être ?). Vous avez bien le nom de votre groupe ainsi que le titre de votre champ et son texte de substitution qui ici est Name (texte à remplacer par le vôtre).[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

4 – Rendre votre groupe de champ personnalisé visible sur votre site

[list style= »style4″] [li]Votre champ s’est bien intégré là où vous le souhaitiez MAIS, problème : il est invisible ! Pourquoi ? Car sa boucle n’est pas créée et il vous faut l’ajouter aux fichiers de votre thème par le biais de FileZilla avec un éditeur de code (sublime text ou dreamweaver).[/li] [li]Ouvrez votre éditeur de texte et créez un nouveau fichier PHP. Copiez collez le bout de code ci-dessous (en remplaçant les mots roses par le titre et le nom de votre champ personnalisé) dans votre fichier et enregistrez-le sur votre bureau en lui donnant comme nom : champs_personnalises_blog.php ou champs_personnalises_portfolio.php ou bien encore champs_personnalises_page.php[/li]
<!-- CONTENU ACF -->
<?php
// Contrôle si ACF est actif
if ( !function_exists('get_field') ) return;
?>
<div class="post-content-acf">
// Contrôle si le champ est vide, si oui alors le champ ne s'affiche pas
<?php if( !empty(get_field('styling')) ): ?>
<div class="acf-MON-CHAMP"><label><strong>TITRE-DE-VOTRE-CHAMP :</strong></label>
<?php the_field('NOM-DE-VOTRE-CHAMP'); ?></div>
<!--acf-MON-CHAMP-->
</div>
<!-- CONTENU ACF -->
[li]Ouvrez maintenant FileZilla, connectez-vous à votre base de données et faites le chemin suivant : www / wp-content / themes / (le nom de votre thème) et ajoutez votre fichier. Pour ajouter votre fichier, il suffit de faire un cliqué glissé du bureau vers FileZilla.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

5 – WP Editor & SF Admin Bar Tools

[list style= »style4″] [li]Installez les deux extensions suivantes : WP Editor et SF admin bar tool. WP Editor va nous servir pour pouvoir accéder aux fichiers php de votre thème et cela va vous éviter de passer par filezilla. SF admin bar tool, va vous permettre de savoir dans quelle partie il faudra inclure le nouveau document php que vous venez de créer pour votre champ personnalisé.[/li] [li]Vous allez premièrement ouvrir votre site et vous rendre à l’endroit où vous avez décidé d’ajouter votre champ. Ici j’ai choisi de le mettre dans le portfolio, je vais donc me rendre sur cette page. L’admin bar tool m’indique que le bon endroit où inclure mon fichier serait : content-portfolio.php.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Avec WP Editor (pour y accéder : apparence / theme editor), je me rends donc dans content-portfolio.php et je vais pouvoir mettre le code qui va inclure mon champ dans le template du projet de mon portfolio. Dans content-portfolio, on remarque une ligne qui est <?php get_template_part( 'content-portfolio-infos-projets' ); ?> en dessous de <div class="post-content"><?php the_content(); ?></div> . La première ligne avec le div concerne tout le contenu du post de mon projet, c’est à dire : son titre, sa date, ses images, ses textes… ! La seconde, va intégrer le champ en dessous de tout ceci, grâce au fichier php que vous aviez créé. [/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous devez donc copier coller cette ligne dans le bon fichier php et au bon endroit : <?php get_template_part( 'nom-de-votre-fichier-php-personnalisé' ); ?>[/li] [/list]

6 – Résultat du tutoriel

[list style= »style4″] [li]Pour terminer, vous allez pouvoir tester votre champ, ou vos champs si vous en avez créé plusieurs.[/li] [li]Testons de remplir 3 champs personnalisés et de voir ce que cela donne :[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Mes 3 champs sont bien là, visibles et au bon endroit. En dessous du titre, de la date, des images et textes et placé avant le pied de page.[/li] [li]Maintenant, si par exemple, je n’ai pas toutes les informations et que je puisse pas remplir ces infos, voyons voir ce que cela affiche :[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [li]La seule info que j’ai indiquée est visible, et les autres non. C’est exactement ce que l’on veut. C’est grâce à la fonction php if empty (contrôle si c’est vide) que l’on peut faire ceci.[/li] [/list]

Le tutoriel est à présent terminé. Je vous conseille de désinstaller l’application WP Editor par la suite. Cette extension peut s’avérer pratique pour ce genre de manipulation, mais elle peut rendre votre site vulnérable. Si une personne parvenait à accéder à votre admin, il aurait de cette façon, accès à tous vos fichiers source. Il pourrait même en supprimer ou en rajouter. La meilleure solution sera de passer par votre éditeur de texte et FileZilla pour une sécurité garantie.

0

Astuces, Tutoriels, WordPress
Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine Hello mes petites myrtilles, il y a quelques jours, pour les besoins d’un projet web sur lequel je travaille en ce moment, j’ai eu le besoin de créer un sous-domaine dans la catégorie hébergement de mon compte OVH, dans le but de pouvoir y installer un second wordpress. Le sous-domaine va me permettre de pouvoir me créer un petit serveur web, contenant plusieurs dossiers racines.. Ainsi je pourrais installer autant de wordpress qu’il est possible. Avoir un second wordpress ce n’est pas obligatoirement payant, et c’est parfois très pratique pour nos clients. Par exemple, vous avez un client qui souhaite que vous lui fassiez un site (installation, intégration d’un thème etc…), le fait d’avoir ce sous-domaine va vous permettre de le transmettre à votre client, afin qu’il puisse suivre l’avancé de son site. Voyez ça comme un site de test. Si vous êtes blogueuse, un sous-domaine pourra vous être utile pour ajouter un portfolio sans avoir à acheter un nouveau nom de domaine / hébergement. Cette astuce permet d’avoir deux sites (ou plus) sur la même base de données, d’avoir deux WordPress aux design différent, et surtout c’est GRATUIT. Sauf si vous préférez acheter une nouvelle base de données, dans ce cas c’est vous qui voyez. ATTENTION : n’allez pas dans l’abus en vous disant « chouette, je vais pouvoir héberger 5 sites webs avec la même base de données pour le prix d’un seul avec l’offre perso d’OVH » ! Il faut savoir qu’en cas de piratage, tous vos sites peuvent être atteints, même si vous avez modifié vos prefixes des tables. Les autres propositions OVH offrent plusieurs bases de données, ce qui peut vous rassurer concernant un eventuel piratage. À savoir : plus vous aurez de sites wordpress dans votre sous-domaine, plus cela pourra créer de ralentissements sur tous vos sites (ils se partagent la même base de données). Bref, j’ai pensé que cela vous serait utile de savoir comment procéder avec l’aide de OVH, FileZilla (client FTP – logiciel gratuit qui va servir à accéder aux fichiers de votre serveur et dossiers racines) & PHPmyadmin. Bien évidemment ce tutoriel s’adresse aux personnes déjà détentrices d’un hébergement / nom de domaine chez OVH. Si ce n’est pas le cas, je vous laisse commander et revenir par ici après. Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine  

CREER ET CONFIGURER UN SOUS-DOMAINE OVH

Oui, vous avez bien lu, nous n’auront besoin que d’un seul sous-domaine. C’est dans le dossier racine de notre sous-domaine que nous pourrons créer nos autres dossiers comprenant chacun un wordpress. Par exemple : www.monsite.fr va ainsi devenir www.dev.monsite.fr avec le sous-domaine puis www.dev.monsite.fr/site-test.fr ! Pour le créer c’est relativement simple, voici la démarche à suivre : La première étape est de vous connecter à votre espace client OVH, puis de vous rendre dans l’onglet « HÉBERGEMENTS« , sélectionnez votre nom de domaine puis cliquez sur « Multisite« . Allez sur « Ajouter un domaine ou sous-domaine« , une fenêtre va s’ouvrir, on vous propose deux solutions, c’est celle qui est cochée par défaut qui nous intéresse. Cliquez sur suivant, on vous dira que « Le domaine choisi est déjà attaché à l’Hébergement Web« , n’en tenez pas compte et tapez ce que vous voulez dans la case domaine (ex : test.monsite.fr). La case d’après demande le nom de votre dossier racine (pour le créer, rendez-vous dans FileZilla, connectez-vous, dans la partie où votre dossier « www » se trouve, créez un nouveau dossier du même nom le sous-domaine « test ».) Il est très important de séparer vos dossiers racines, donc ne faites pas l’erreur d’ajouter un autre dossier racine à l’intérieur de « www » qui contient déjà tout votre premier site.

*Cliquez sur les images pour mieux voir*

[one-third-first]Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine[/one-third-first] [one-third]Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine[/one-third] [one-third]Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine[/one-third]

[vertical-spacer]

[one-third-first][/one-third-first] [one-third]Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine[/one-third] [one-third]Comment avoir deux sites wordpress sur la même base de données à l'aide d'un sous-domaine

*Mon dossier racine et mon sous-domaine ont le même name : tests*

[/one-third]

[vertical-spacer]

Pour les options on vous propose plusieurs options :
  • Activer l’IPv6 (IPv6 est le futur de l’IPv4, c’est un peux comme les 06 qui sont passés aux 07, trop de numéros utilisés donc nouveau protocole nécessaire. À la seule différence que l’IPv6 elle est beaucoup plus puissante et réactive. Sauf que tous les routeurs du monde ne les prennent pas. Donc ce n’est pas vraiment nécessaire de cocher cette option.)
  • SSL (Permets de passer son site en HTTPS et ainsi le rendre sécurisé, surtout pour le WooCommerce. Vous pouvez aller lire l’article de Fabrice Ducarme du site WPFORMATION  » COMMENT PASSER EN HTTPS  » ou bien COMMENT PASSER SON BLOG WORDPRESS EN HTTPS SANS TOUT CASSER ?  » de Marlène du site NoTuxedo qui est bien expliqué.)
  • Ip du Pays (Vous souhaitez être présent en Angleterre ? Choisissez d’héberger votre site sous une IP anglaise. Pour les moteurs de recherche anglais, votre site sera hébergé en Angleterre ! C’est aussi simple que ça ! De mon côté, il est évident que j’ai choisi l’Ip de la France.)
  • Activer le Firewall (Ce module complémentaire d’Apache, filtre toutes les requêtes entrantes sur vos serveurs web. Pour plus de sécurité, il les intercepte et les vérifie avant même qu’elles ne soient traitées par les scripts. C’est donc bien de l’activer.)
  • Logs séparés (Les multilogs permettent de séparer les logs des multi-domaines d’un hébergement mutualisé de ceux du domaine principal, ce qui en fait un outil idéal pour les revendeurs. Je ne l’ai pas coché, pour la simple raison que je ne compte rien revendre). 
Un récapitulatif de vos choix va s’ouvrir et vous devez cocher la case : Configuration automatique, elle est recommandée. En dessous on vous informera si votre configuration est correcte ou non. Il ne vous reste plus qu’à créer un nouveau dossier à l’intérieur de votre nouveau dossier racine (blog ou ce que vous aurez choisi) avec FileZilla afin d’obtenir l’url suivante : www.blog.monsite.fr/site.fr !

RÉCAPITULATIF

Vous avez créé le dossier racine blog (le nom de votre sous-domaine) dans filezilla en dessous de votre premier dossier racine « www ». Vous avez créé l’intérieur de celui-ci un nouveau dossier du nom que vous voulez, par ex : « site ». C’est à l’intérieur du dossier « site » qu’il faudra installer WordPress.Org

INSTALLER ET CONFIGURER MON SECOND WORDPRESS

Cette installation sera très simple à réaliser et gratuite. Une fois que la dernière version de WordPress est téléchargée, vous devez copier/coller ou glisser tout ses fichiers dans votre dossier « site » à l’aide de FileZilla. Quand le téléchargement des fichiers sera terminé, si vous tapez correctement l’url dans votre navigateur vous arriverez sur cette page : Une fois que la dernière version de WordPress est téléchargée, vous devez copier/coller ou glisser tout ses fichiers dans votre dossier site à l'aide de FileZilla. Quand le téléchargement des fichiers sera terminé, si vous tapez correctement l'url dans votre navigateur vous arriverez sur cette page Cliquez sur  » C’est parti ! » pour arriver sur la page suivante : Vous devez renseigner exactement les mêmes informations que pour votre premier WordPress SAUF : Préfixe des tables ! C'est grâce aux préfixe des tables que vous pourrez différencier vos sites dans PHPmyadmin, et c'est la solution gratuite pour installer plusieurs WordPress sur une seule base de données. Vous devez renseigner exactement les mêmes informations que pour votre premier WordPress SAUF : « Préfixe des tables » ! C’est grâce aux préfixe des tables que vous pourrez différencier vos sites dans PHPmyadmin, et c’est la solution gratuite pour installer plusieurs WordPress sur une seule base de données. Il est donc primordiale et très important de modifier ce préfixe, si pour votre premier wordpress vous avez laissé wp_ alors mettez xp_ . Si vous aviez changé wp_ pour autre chose, modifiez-le quand même. Il faut vraiment que ce soit différent. Et voilà, il ne vous restera plus qu’à choisir le titre de votre site, votre identifiant, mot de passe etc… !

PHPMYADMIN.OVH.NET

En achetant notre hébergement et nom de domaine sur OVH, nous avons tous un accès au site PhpMyAdmin d’OVH. Lorsque vous serez connecté à votre compte, vous verrez bien la différence entre vos wordpress, grâce aux préfixe des tables que vous aurez choisi auparavant. J’espère que ce tutoriel vous sera utile mes petites myrtilles.
6

dapibus elementum consequat. Sed fringilla Donec venenatis id at leo Praesent