Contenu
- 01. Installez une nouvelle copie de WordPress
- 02. Supprimer les plugins par défaut
- 03. Ajouter un type de publication personnalisé
- 04. L'interface d'ajout / modification de type d'article personnalisé
- 05. Créer un slug de réécriture personnalisé
- 06. Ajout de la prise en charge des champs personnalisés
- 07. Ajouter des champs personnalisés
- 08. Configurer les champs
- 09. Créez le fichier de modèle WordPress
- 10. Créer une mise en page de publication unique pleine largeur
- 11. Démarrez la boucle et créez le contenu
- 12. Utilisez PHP pour appeler des valeurs dynamiques
- 13.Faire un test client avec des données factices
- 14. Traiter les erreurs pour les données manquantes
- 15. Ranger l'interface
- 16. Excluez-le du plan du site
Les consommateurs s'attendent désormais à disposer d'une zone permettant aux utilisateurs de se connecter et de télécharger ou d'afficher des documents, des contrats téléphoniques aux services publics.
Cependant, lorsque les concepteurs travaillent avec leurs clients, tout peut rapidement se décomposer en un mélange d'e-mails, de liens vers des maquettes et des pièces jointes.
Ce tutoriel WordPress montrera comment étendre WordPress (d'autres services d'hébergement Web sont disponibles) dans un portail client capable de stocker des documents, des vidéos et des dessins, afin qu'un client puisse y accéder tous en un seul endroit. Le portail proposera à chaque client un lien unique et protégé par mot de passe qui n'apparaît pas dans la navigation habituelle.
Des types et des champs de publication personnalisés seront utilisés pour stocker les données, et ceux-ci seront ajoutés via des plugins, pour éviter la perte de données en cas de changement de thème. Le thème sera légèrement modifié.
Le fait de disposer d'un portail client permet aux clients d'accéder à leurs fichiers au même endroit, chaque fois qu'ils en ont besoin, tout comme lors de l'utilisation du stockage dans le cloud. Il présente un éventail d'avantages commerciaux, notamment la présentation des ventes incitatives disponibles, ou peut être utilisé pour donner un aperçu du processus de travail depuis le début en décrivant visuellement les livrables.
Téléchargez les fichiers pour ce tutoriel.
- Comment transformer WordPress en un constructeur visuel
01. Installez une nouvelle copie de WordPress
Une nouvelle copie de WordPress est installée sur le serveur de développement, et le thème "sous-piège" a été choisi pour donner une base standard afin de démarrer rapidement le travail. Le plugin d'interface utilisateur Custom Post Type sera utilisé afin que nos types de publication personnalisés soient indépendants du thème.
02. Supprimer les plugins par défaut
Si des plugins par défaut sont fournis avec la copie de WordPress, supprimez-les. Les plugins nécessaires pour ce didacticiel sont "Champs personnalisés avancés" et "Interface utilisateur de type de publication personnalisée". "Classic Editor" a également été installé.
03. Ajouter un type de publication personnalisé
À l'aide de l'interface utilisateur de type de publication personnalisé, ajoutez un nouveau type de publication appelé «client». Lorsque vous entrez dans le "slug de type de publication", utilisez des traits de soulignement au lieu d'espaces et écrivez au singulier, car cela facilitera la création de modèles plus tard. Le préfixe tu_ a été ajouté pour réduire les risques de conflit.
04. L'interface d'ajout / modification de type d'article personnalisé
Ajoutez un pluriel intitulé «clients» et un singulier «client», car cela apparaîtra dans le menu d'administration de WordPress. La capitalisation est acceptée dans ces champs, ce qui rendra le menu WordPress plus ordonné.
05. Créer un slug de réécriture personnalisé
L'utilisation d'un préfixe pour le slug de type de publication signifie que les clients ajoutés au portail seront créés avec un lien qui ressemble à "/ tu_customer / example-company". Cela n'a pas l'air ordonné et le slug de réécriture personnalisé est utilisé pour améliorer cela. La définition du slug de réécriture sur "clients" permet au type de publication personnalisé d'apparaître sous la forme / customers / example-company.
06. Ajout de la prise en charge des champs personnalisés
La dernière option activée pour le type de publication personnalisé est "Prise en charge> Champ personnalisé" qui se trouve en bas de la page. Cochez ceci, puis "ajouter un type de publication" au bas de la page. Cela soumet les modifications et enregistre le type de publication.
07. Ajouter des champs personnalisés
Les champs personnalisés doivent maintenant être ajoutés et affectés au type de publication qui vient d'être créé. L'ajout d'un groupe de champs nommé «portail client» est la première étape, suivi de l'ajout de champs personnalisés avec le bouton Ajouter un champ. Le premier champ «bref» sera défini comme le type de champ «fichier», ce qui permet à l'administrateur de télécharger un fichier à cet emplacement. Définissez la valeur de retour sur "URL du fichier".
08. Configurer les champs
Le champ suivant à ajouter est «questionnaire de marque». Cela consistera en un lien vers un formulaire Google que le client devra remplir. Le type de champ le plus approprié pour cela est "URL". Cette même méthode peut être utilisée pour tous les champs qui seront liés à un service externe. Lorsque vous avez terminé, faites défiler jusqu'à la case "emplacement" et utilisez la logique "Afficher si le type de message" = "Client". Publiez ensuite le groupe de champs.
09. Créez le fichier de modèle WordPress
WordPress a besoin de savoir comment afficher un tableau de bord client. Pour cela, la hiérarchie des modèles WordPress est suivie pour créer un fichier modèle pour ce type de publication spécifique. Créez un fichier appelé single-tu_customer.php dans le répertoire du thème racine.
10. Créer une mise en page de publication unique pleine largeur
Ouvrez le fichier single-tu_customer.php et ajoutez les fonctions WordPress get_header et get_footer. Entre ces fonctions, créez une mise en page pleine largeur pour contenir le contenu qui fonctionne avec votre thème.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Contenu -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Démarrez la boucle et créez le contenu
Dans l'élément principal>, appelez the_post et créez les éléments de conteneur pour contenir des informations. Utilisez les informations d'espace réservé pour vous faire une idée de la mise en page et commencer à styliser les éléments. Les éléments de la carte seront des cartes bootstrap avec un en-tête, une description et un lien.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php end while; // fin de la boucle. ?> var13 -> / main>! - #main ->
12. Utilisez PHP pour appeler des valeurs dynamiques
En utilisant la fonction "the_field", une fonction fournie avec le plugin de champs personnalisés avancés, le contenu dynamique des champs personnalisés est entré dans le modèle client. «Field_name» est la valeur qui a été entrée à l’étape 3.
div> div> h5> Brief / h5> p> Ceci est votre bref document original / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13.Faire un test client avec des données factices
En accédant au tableau de bord WordPress, un nouveau client peut être ajouté à partir de la barre de gauche. Clients> Ajouter un nouveau client. L'affichage de l'article sera familier, mais le défilement vers le bas révélera tous les nouveaux champs personnalisés. Entrez des données de test pour vous assurer que tout fonctionne correctement.
14. Traiter les erreurs pour les données manquantes
Si un document est oublié ou s'il est tout simplement trop tôt dans le processus pour que ce document soit disponible, il peut être déroutant pour un client lorsque le bouton ne fonctionne pas. Ajouter un contrôle qu'une valeur existe avant de l'afficher donne une chance d'afficher une variante "champ manquant" de la carte. Ajouter une classe "désactivée" à la carte lorsque la valeur est manquante nous permettra de styliser les cartes indisponibles.
? php if (get_field ('field_name')):?> var13 -> affiché quand le field_name a une valeur? php else: // field_name a retourné false?> var13 -> affiché quand le champ n'existe pas? php endif ; // fin de la logique if field_name?> var13 ->
15. Ranger l'interface
Maintenant que la structure de l'interface est finalisée, elle peut être stylée correctement. En utilisant CSS, l'apparence des cartes et des couleurs sur la page peut être améliorée. La couleur de la navigation a été changée en bleu plus clair et la direction de l'utilisateur a été améliorée en ajoutant un texte d'introduction.
16. Excluez-le du plan du site
Les types de messages personnalisés ne doivent pas être trouvés dans les résultats des moteurs de recherche. Le type de publication doit être exclu du plan du site du site Web, soit via un plug-in SEO, soit manuellement à l'aide d'une balise Meta et du fichier robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Vous souhaitez concevoir un nouveau site Web? Utilisez un créateur de site Web génial pour simplifier le processus.
