Faire fonctionner les styles de Visual Editor avec des post-formats

Lors de la sortie de WordPress 3.1, une nouvelle fonctionnalité, Post Formats, a été introduite. Elle permettait aux auteurs de sélectionner l'un des neuf formats de publication. Les développeurs de thèmes ont dû ajouter un support pour inclure chaque format, ainsi que des balises conditionnelles et CSS pour tirer parti de ce qu’ils avaient à offrir. Chaque format peut être affiché au début avec une présentation et un design différents, bien que l’éditeur visuel de l’administration wp ne l’ait pas reflété..

Pour ce tutoriel, je vais nous concentrer sur la manière dont nous pouvons obtenir que notre thème affiche le format du message de citation afin que la mise en page et la conception frontales soient reflétées lors de la création d'un message dans l'éditeur visuel..

Plus sur les formats de post

Au total, il n'y a que neuf formats de publication pouvant être pris en charge par un thème: de côté, Galerie, vidéo, l'audio, image, statut, lien, citation, bavarder. Vous pouvez en savoir plus sur tous les formats de publication disponibles dans WordPress dans l'article de Braden Keith Formats de publication internes et externes.

Étape 1: Ajout de la prise en charge des formats de post

Tout d’abord, assurons-nous que notre thème prend en charge les formats de publication. et styles de l'éditeur. Tout ce que nous devons faire est d’inclure les éléments suivants dans notre functions.php fichier:

 // Ce thème donne un style à l'éditeur visuel avec editor-style.css pour correspondre au style du thème. add_editor_style (); // Ajout du support pour les formats de publication de citation add_theme_support ('post-formats', array ('quote'));

Pointe: Rappelez-vous que lors de l'ajout de PHP à un fichier, il doit être dans l'ouverture et fermeture ?> balises ou sinon, il ne sera affiché qu'en HTML au lieu d'être traité en PHP.

  
  Étape 2: Le fichier de contenu de la citation
 Afin de contrôler l’affichage de notre format de citation sur le front-end, nous devons créer un fichier appelé content-quote.php. Ceci est notre modèle de page de format de devis et il doit être placé dans le dossier de notre thème. Voici le code que nous devons ajouter à notre nouveau fichier:
  >   
 
 Ce modèle de page sera utilisé sur nos pages d’index et d’archive. Il est souvent appelé directement à partir du index.php fichier avec le code suivant:
    
 
  Étape 3: Créer le CSS
 Voici un exemple de la façon dont le format de message de citation apparaît dans mon thème Gridiculous pour WordPress:
  Pour que les choses se présentent comme nous le voulons, nous devons inclure des CSS:
  / * = Devis ---------------------------------------------- ---------------- * / .format-quote .post-content taille de la police: 18px; hauteur de ligne: 27px; padding-left: 50px; style de police: italique;  .format-quote p, .format-quote blockquote margin: 0;  .format-quote: avant font-family: Georgia, serif; couleur: # 999; bloc de visualisation; taille de police: 100px; largeur: 50px; contenu: '\ 201C'; hauteur: 0; en haut: -40px; position: relative;  .format-quote blockquote border: 0; rembourrage: 0; taille de police: 18px; couleur: # 555;  cite text-align: right; style de police: normal; bloc de visualisation; marge inférieure: 10px;  cite: before content: '\ 2013 \ 00A0'; 
 Le CSS ci-dessus doit être inclus dans notre thème style.css fichier, mais nous devons aussi créer un editor-style.css déposer et l'ajouter à notre thème. Cette feuille de style est ce qui sera utilisé lorsque nous afficherons notre publication dans l'éditeur visuel..
 
  Étape 4: La magie de jQuery
 Presque tous les effets impressionnants que vous rencontrez dans l'administrateur WordPress sont créés à l'aide de jQuery. Comme il est déjà inclus sur la page d’administration, construisons-le pour que notre éditeur visuel fonctionne avec nos styles d’éditeur de format de publication..
 Si un / js Le dossier n’existe pas déjà dans votre thème, créez-en un et ajoutez un nouveau fichier JavaScript appelé editor-styles-post-format.js. Une fois le fichier créé, ouvrez-le dans votre éditeur de texte préféré et ajoutez ce qui suit:
  (function ($) $ (fenêtre) .load (function () var init_post_format = $ ('# post-formats-select') .find ('.post-format: vérifié') .val (); add_post_format ( init_post_format);); $ ('# post-formats-select') .find ('.post-format') .change (function () var post_format = $ (this) .val (); add_post_format (post_format) ;); fonction add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; if (frames ['content_ifr']) $ ('html', frames ['content_ifr'].). removeClass (). addClass ('format-' + post_format);) (jQuery);
 Avec notre script jQuery prêt, nous devons le mettre en file d'attente afin qu'il apparaisse lorsque nous naviguons dans notre administrateur. Voici un autre petit bloc de code que nous devons ajouter à notre functions.php fichier:
  add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); function editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ hook) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri (). '/ js / editor-styles. post-format.js ', true, array (' jquery '),' 1.0.0 '); 
 
  Étape 5: Rédaction de notre citation
 Lorsque tout est en place, chaque fois que nous sélectionnons un format de publication sur l’écran de modification de publication de notre administrateur, un cours sera ajouté à l’éditeur visuel de la même manière que son ajout sur le front-end, et nous pourrons avoir un aperçu du fonctionnement de notre publication. regardera comme nous le créons. Nous devons simplement nous assurer d'utiliser le code HTML suivant lors de la création d'un article afin que notre CSS fonctionne correctement.
   Une seule chose est impossible à Dieu: trouver un sens à n’importe quelle loi sur le droit d’auteur sur la planète.   Mark Twain   
 
 Conclusion
  Il y a quelques étapes à franchir, mais au final, ce n’est pas si compliqué de mettre en place les éléments nécessaires pour que notre éditeur visuel travaille avec les formats de publication. Heureusement, de nombreux thèmes incluent déjà la plupart de ces éléments. Il est donc possible que nous devions seulement créer et mettre en file d'attente le nouveau fichier JavaScript. Un de ces jours, peut-être que quelqu'un créera même un correctif dans WordPress afin que cette fonctionnalité devienne partie intégrante du noyau.
 Si vous avez des commentaires ou des remarques sur tout ce que vous avez lu ci-dessus, n'hésitez pas à en discuter ci-dessous.



		
			
	   
	




Code