Share
Cuando se lanzó WordPress 3.1, se introdujo una nueva característica llamada Formatos de publicación, que permitió a los autores seleccionar uno de los nueve formatos para sus publicaciones. Los desarrolladores de temas tuvieron que agregar soporte para incluir cada formato, así como algunas etiquetas condicionales y CSS para aprovechar lo que tenían para ofrecer. Cada formato podría mostrarse en la parte delantera con un diseño y diseño diferentes, aunque el editor visual en el wp-admin no reflejó esto.
Para este tutorial, me centraré en cómo podemos conseguir que nuestro tema muestre el formato de publicación de Cotización para que el diseño y el diseño de la interfaz de usuario se reflejen al crear una publicación en el editor visual..
En total, solo hay nueve formatos de publicaciones que pueden ser compatibles con un tema: aparte, galería, vídeo, audio, imagen, estado, enlazar, citar, charla. Puede leer más sobre todos los formatos de publicaciones disponibles en WordPress en el artículo de Braden Keith Formatos de publicaciones internas y externas.
Primero lo primero, asegurémonos de que nuestro tema sea compatible con los formatos de publicación. y estilos de editor Todo lo que necesitamos hacer es incluir lo siguiente en nuestra funciones.php expediente:
Accentsconagua
// Este tema le da estilo al editor visual con editor-style.css para que coincida con el estilo del tema. add_editor_style (); // Agregar soporte para los formatos de post de cita add_theme_support ('post-format', array ('quote')); Propina: Recuerde que al agregar PHP a un archivo, debe estar dentro de la apertura y cerrando ?> etiquetas o de lo contrario solo se mostrará como HTML en lugar de procesarse como PHP.
Para controlar cómo se mostrará nuestro Formato de publicación de cotización en el extremo frontal, necesitamos crear un archivo llamado content-quote.php. Esta es nuestra plantilla de página de formato de cotización y debe colocarse dentro de la carpeta de nuestro tema. Aquí está el código que necesitamos agregar a nuestro nuevo archivo:
>
Esta plantilla de página se utilizará en nuestras páginas de índice y archivo, ya menudo se llama directamente desde el index.php archivo con el siguiente código:
Este es un ejemplo de cómo se ve el formato de publicación de citas en mi tema de Gridiculous para WordPress:
Para que las cosas se vean como queremos, necesitamos incluir algo de CSS:
/ * = Cita ---------------------------------------------- ---------------- * / .format-quote .post-content font-size: 18px; línea de altura: 27px; relleno-izquierda: 50px; estilo de letra: cursiva; .format-quote p, .format-quote blockquote margin: 0; .format-quote: antes de font-family: Georgia, serif; color: # 999; bloqueo de pantalla; tamaño de fuente: 100px; ancho: 50px; contenido: '\ 201C'; altura: 0; arriba: -40px; posición: relativa; .format-quote blockquote border: 0; relleno: 0; tamaño de fuente: 18px; color: # 555; citar text-align: right; estilo de letra: normal; bloqueo de pantalla; margen inferior: 10px; citar: antes de contenido: '\ 2013 \ 00A0';
El CSS anterior debe ser incluido en nuestros temas style.css archivo, pero también tenemos que crear un editor-style.css Archivo y agregarlo a nuestro tema. Esta hoja de estilo es lo que se usará cuando veamos nuestra publicación en el editor visual.
Casi todos y cada uno de los efectos impresionantes que experimenta en el administrador de WordPress se crean utilizando jQuery. Dado que ya está incluido en la página de administración, vamos a desarrollarlo para que nuestro editor visual funcione con nuestros estilos de editor de formato de publicación.
Si un / js la carpeta no existe en su tema, cree una y agregue un nuevo archivo de JavaScript llamado editor-styles-post-format.js. Una vez creado el archivo, ábralo en su editor de texto favorito y agregue lo siguiente:
(function ($) $ (window) .load (function () var init_post_format = $ ('# post-format-select') .find ('.post-format: checked') .val (); add_post_format ( init_post_format);); $ ('# post-format-select') .find ('.post-format') .change (function () var post_format = $ (this) .val (); add_post_format (post_format) ;); function add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; if (frames ['content_ifr']) $ ('html', frames ['content_ifr']. document). removeClass (). addClass ('format-' + post_format);) (jQuery); Con nuestro script jQuery listo, debemos ponerlo en cola para que aparezca cuando navegamos por nuestro administrador. Aquí hay otro pequeño bloque de código que necesitamos agregar a nuestro funciones.php expediente:
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 '); Con todo en su lugar, cada vez que seleccionamos un formato de publicación en la pantalla de edición de publicación en nuestro administrador, se agregará una clase al editor visual similar a la forma en que se agrega en la parte delantera, y podremos obtener una vista previa de cómo nuestra publicación Mirará como lo estamos creando. Solo debemos asegurarnos de utilizar el siguiente HTML al crear una publicación para que nuestro CSS funcione correctamente..
Solo una cosa es imposible para Dios: encontrar algún sentido en cualquier ley de derechos de autor en el planeta.. Mark Twain
Hay un par de pasos involucrados, pero al final, no es tan complicado poner las cosas en su lugar para que nuestro editor visual trabaje con formatos de publicación. Afortunadamente, muchos temas ya incluyen la mayoría de estos elementos, por lo que es posible que solo tengamos que crear y poner en cola el nuevo archivo JavaScript. Uno de estos días, tal vez alguien incluso cree un parche en WordPress para que esta funcionalidad se convierta en parte del núcleo..
Si tiene algún comentario o comentario sobre algo que leyó anteriormente, siéntase libre de discutirlo a continuación.
