Comment faire L’éditeur WordPress ressemble à votre site
Cela pourrait bientôt devenir un gros problème pour deux raisons:
Changement de contexte: l’écriture signifie entrer dans une niche. Une fois à l’intérieur, tu veux rester. La nécessité de passer constamment d’une fenêtre de navigateur à un autre environnement visuel est un tueur de Focus et de trafic. Temps: tous les allers – retours entre l’éditeur et la fenêtre d’aperçu totalisent plus d’une semaine de travail. Essaie toi – même. La prochaine fois que vous faites un travail, faites attention à la fréquence à laquelle vous changez les étiquettes. C’est le temps qui aurait pu être utilisé pour affiner le contenu réel. Vous n’avez pas besoin de prévisualiser constamment votre travail en personnalisant l’écran d’édition pour correspondre à l’affichage frontal. Il fait de l’éditeur plus qu’un outil réel de ce que vous voyez et obtenez.
Par exemple, compte tenu du grand nombre de hauteurs de ligne et de tailles de police utilisées par le sujet, vous pourriez vous inquiéter qu’un paragraphe particulier soit un peu trop long (comme indiqué dans le développement de wpmu). Personnalisez votre éditeur de messages et lorsque vous tapez, le résultat final est à l’écran. Il y a plusieurs autres avantages importants à noter: il permet aux membres de l’équipe non technique de placer plus facilement le contenu dans un contexte qu’ils connaissent immédiatement. C’est une excellente expérience haut de gamme lorsque vous préparez votre site pour des clients externes qui pourraient venir pour la première fois sur WordPress. Et l’éditeur frontal? Certaines personnes peuvent se demander: Que diriez – vous d’un éditeur de contenu frontal? C’est pas pour ça qu’ils l’ont conçu? N’avez – vous pas mentionné que le plug – in d’éditeur frontal intégré dans la prochaine version de WordPress est la fonctionnalité principale?
Bonne question. Prenons – en un à la fois. L’éditeur frontal est une fonctionnalité de mod
Forte poussée de concurrents WordPress tels que squarespace et weebly. Le grand potentiel de ces éditeurs est qu’ils permettent aux utilisateurs non techniques d’interagir directement avec le contenu du site pour apporter des changements. Si vous souhaitez apporter quelques modifications mineures aux sections de contenu existantes, elles peuvent être parfaites et sont généralement faciles à utiliser pour les administrateurs ou les propriétaires de sites moins expérimentés s’ils sont correctement configurés.
L’inconvénient est que ces solutions offrent généralement une gamme étroite de fonctionnalités, que ce soit l’édition elle – même ou l’impossibilité d’accéder à des fonctions de post avancées telles que les méta – boîtes. Ils créent également des obstacles à la fonctionnalité que vous et d’autres parties de l’Administrateur d’arrière – plan fournissez. Ensuite, il y a les questions de flux de travail et de contrôle d’édition à considérer. Si vous voulez que les gens puissent entrer et modifier le contenu immédiatement, l’éditeur frontal est bon, mais ce n’est pas toujours le cas. Le dernier point clé est la complexité. Assembler un éditeur frontal fiable n’est pas facile. Bon nombre des meilleurs plug – ins disponibles sont des produits commerciaux, ce qui signifie que vous avez ajouté une autre couche de dépendance payante à votre configuration et que vous devez vous soucier de la compatibilité future avec d’autres parties du sujet.
Je veux dire, c’est une question compliquée. Beaucoup d’entre nous espèrent qu’une partie de la complexité pourra être allégée en incluant le plugin d’éditeur frontal dans le noyau WordPress. Malheureusement, après beaucoup d’excitation initiale, ces espoirs sont voués à la déception.
Et a été déplacé dans la liste des plug – ins fonctionnels inactifs. Malheureusement, il est certain que nous ne le verrons pas bientôt apparaître au cœur de l’histoire.
Si vous êtes intéressé à essayer l’éditeur frontal, nous vous recommandons d’essayer l’éditeur frontal (gratuit) ou le compositeur visuel (payant), mais gardez à l’esprit la complexité potentielle que nous avons mentionnée ci – dessus. D’autre part, l’approche que nous allons adopter dans cet article vous offre un moyen simple de contourner ces goulets d’étranglement et d’être direct: Laissez votre contenu chanter. Commençons à y arriver. Chaque site aura naturellement un contenu différent et peut – être des implémentations de sujets très différents. Aux fins de cet article, nous effectuerons une analyse pour vous donner une bonne compréhension des bases que vous pouvez ensuite appliquer librement aux exigences spécifiques de la configuration.
Nous utiliserons la configuration WordPress locale et commencerons par tester la version des données à partir des unités de thème WordPress pour illustrer notre point de vue. Si vous commencez à penser à personnaliser votre environnement, cette approche offre deux avantages évidents: en développant localement, vous êtes libre d’expérimenter sans risque d’interruption pour vos utilisateurs ou vos collègues. Les données de test de l’unité thématique WordPress vous fournissent un ensemble de contenus de base raisonnablement organisés sur lesquels vous pouvez tester vos modifications. Qu’il s’agisse de l’avant ou de l’arrière – plan, il s’agit d’une plate – forme idéale pour explorer tout type de changement de thème. Dans notre exemple, après avoir téléchargé et importé le paquet starter à partir du test WP sur la nouvelle installation WordPress locale, nous avons choisi 215 comme thème.
Cette combinaison nous offre de nombreuses pages bien organisées, telles que le balisage et le formatage et l’alignement des images, qui peuvent être utilisées immédiatement. WP test Tag page and format. Si vous suivez cette méthode, vous pouvez la copier ou simplement activer votre thème dans une installation locale
Contenu du site actuel. Nous proposons la première étape comme première étape. Le contenu fourni par WP test est un excellent moyen de vérifier que le style du sujet actuel est complet avant de commencer à apporter des changements importants. Découvrez ce qui se passe sous le capot maintenant nous avons quelques exemples raisonnables à voir, avant de regarder la personnalisation de l’éditeur lui – même, prenons un moment pour comprendre ce qui se passe sous le capot dans WordPress. Comme indiqué ci – dessus, WordPress est livré en standard avec l’éditeur open source tinymce. On peut dire que c’est le bas d’une pile de sujets. Tinymce a sa propre feuille de style qui contrôle la façon dont le contenu est affiché. Par défaut, il est heureux et ne sait rien du monde extérieur. Cependant, les développeurs de tinymce ont de bonnes raisons de laisser place au chargement d’autres feuilles de style avec un crochet appelé content _ CSS. Pour leur part, les développeurs de WordPress l’ont très gentiment inclus dans une fonctionnalité locale appelée add _ Editor style. Ceci est inclus dans WordPress Core depuis la version 3.0.0. Si vous visualisez un document en ligne, vous verrez cette fonctionnalité cachée dans WP includes \/ theme. Php. Dans quelques minutes, nous verrons comment appeler cette fonction directement. Par défaut, WordPress utilise cette fonctionnalité pour vérifier les fichiers CSS appelés styles d’éditeur dans le répertoire principal du thème. CSS qui peut être utilisé pour modéliser le contenu de l’éditeur. Par conséquent, si vous souhaitez personnaliser un thème existant, l’une des premières questions que vous devez poser est le fichier de style éditeur. CSS est déjà dans votre sujet? Si nous prenons par exemple le thème 215, nous pouvons voir qu’il contient en fait un tel fichier. Basculer rapidement entre la vue d’aperçu et la vue de gestion d’une page marquée
Le formatage montre que les principaux styles sont copiés fidèlement entre les environnements. Texte dans la fenêtre de l’éditeur de gauche, aperçu de droite. Examinons plus en détail si le style affiché dans la fenêtre de l’éditeur est contrôlé par le style de l’éditeur. CSS. Nous avons juste besoin d’un accès rapide à l’Inspecteur Web pour confirmer que c’est vrai. Par défaut, l’éditeur trouve le style de l’éditeur. CSS s’attend à ce que le scénario de base soit relativement clair à ce stade. Résumé: l’éditeur WordPress est pris en charge par tinymce. Tinymce vous permet d’ignorer son style par défaut. WordPress utilise une fonction appelée add _ Editor style pour spécifier quel fichier CSS doit être utilisé pour outrepasser le style par défaut. Par défaut, WordPress recherche des fichiers nommés style éditeur. CSS est à la racine du thème actif. La prochaine question est de savoir comment gérer vos propres changements. Suivez les recommandations ci – dessus pour effectuer vos propres modifications. Tout d’abord, vous devez clarifier s’il y a un fichier de feuille de style d’éditeur par défaut dans le Répertoire racine du dossier sujet. Dans l’affirmative, nous vous recommandons de copier au même endroit et de l’appeler style d’éditeur personnalisé. CSS. Cela vous donne un endroit propre pour commencer l’expérience et un moyen facile de revenir à la configuration originale. S’il n’y a pas de fichier, créez un nouveau fichier appelé Custom Editor style. CSS et placez – le dans le Répertoire racine du dossier sujet. Lien personnaliser CSS notre prochaine étape est de dire à WordPress de rechercher nos nouveaux fichiers, pas les fichiers par défaut. Pour ce faire, nous ajouterons des dérogations à la fonction. PHP de notre sujet appelle add _ Editor style et leur dit d’utiliser notre nouvelle feuille de style. Allumez la fonction. Sujet pour PHP, ajouter la ligne suivante à la fin et enregistrer. Instructions pour charger midoriberlin \/ 400a2c58d26ec1033817 suite
Notre éditeur utilise en fait une nouvelle feuille de style. Une fois de plus, nous devons nous assurer que les inspecteurs ont un accès rapide. Comme vous pouvez le voir ci – dessous, nous avons maintenant réussi à nous connecter au nouveau fichier. La version de style de l’éditeur personnalisé est actuellement chargée. CSS. Maintenant, faisons quelques changements rapides aux fichiers css pour nous assurer qu’ils sont obtenus à partir de l’arrière – plan. Tout d’abord, je vais modifier les styles d’éditeur personnalisés pour rendre ces titres attrayants en vert. CSS. Le titre devient vert. Le titre a été modifié en ajustant le CSS suivant: Load Summary midoriberlin \/ c3ae04d4a56a00d1a650, maintenant nous ajoutons une mince bordure à l’image # Tinymce, si vous voulez savoir, l’id est automatiquement attribué à l’étiquette Dans l’éditeur tinymce. Nous serons en mesure de voir les résultats de ce changement immédiatement à travers la page d’alignement de l’image. Changez la couleur de la bordure de l’image en rose dans l’éditeur. Nous n’introduirons pas de présentations CSS dans un avenir proche, mais il ressort clairement de ces deux exemples simples que nous avons maintenant un contrôle total sur le contenu de la fenêtre de l’éditeur. Au fait, la bordure rose a été créée avec le CSS suivant: charger le résumé midoriberlin \/ 401d88ad946526594732 d’ici il s’agit de vérifier le CSS existant et de s’assurer qu’il correspond à votre éditeur de la manière la plus appropriée à votre cas d’utilisation. Utilisez une feuille de style de première ligne existante comme base si vous n’utilisez pas une feuille de style d’éditeur existante comme nous l’avons fait ici, vous pouvez également importer une feuille de style de première ligne existante pour votre site comme base. Apprenons rapidement comment le faire. Pour importer une feuille de style frontale existante, il suffit de remplacer le contenu de style de l’éditeur personnalisé. CSS C C
À propos de ce qui suit: Télécharger le résumé midoriberlin \/ c513eb54beca3727f6ff lorsque vous faites cela, les choses semblent un peu cassées au début, mais vous avez un bon endroit pour séparer les préoccupations et une base de travail solide. Les prochaines étapes dépendront entièrement de la mesure dans laquelle l’affichage frontal correspond à l’éditeur. Nous vous recommandons de consulter la Feuille de style de l’éditeur. CSS fournit 215 comme point de départ pour cartographier la politique CSS. En outre, il est important de se référer à la documentation wordpress pour des conseils sur la façon d’améliorer cette approche avec des fonctionnalités plus avancées telles que l’ajout de styles personnalisés en fonction du type de message. Avant de terminer, nous devrions également mentionner quelques autres personnalisations tinymce que vous pourriez vouloir explorer: contrôler l’affichage des boutons dans tinymce: un bon aperçu de Raelene Wilson. Tinymce Advanced: un plug – in qui ajoute des styles personnalisés comme boutons. Conclusion le contrôle de l’affichage de la fenêtre de l’éditeur dans WordPress vous permettra d’économiser du temps en tant qu’auteur et d’ajouter une couche de retouche professionnelle supplémentaire à votre thème. En comprenant comment les styles sont appliqués, vous pouvez personnaliser autant ou aussi peu de styles que possible. Examinons ces étapes: vérifiez que votre sujet a une feuille de style de l’éditeur. CSS. Créez vos propres feuilles de style personnalisées et pointez vers WordPress. Utilisez une feuille de style d’éditeur existante comme base ou importez un style pour le thème principal. Obtenez un style. Nous espérons que cet article vous aidera à contrôler votre environnement de travail. Changez la couleur de la bordure de l’image en rose dans l’éditeur. Si vous avez des conseils ou des astuces à partager, parlez – nous dans les commentaires ci – dessous! Étiquettes: administrateur CSS WordPress Editor