Share
Lanzar un tema de WordPress en un mercado, como ThemeForest, donde la audiencia es tan grande y diversa, tiene algunos desafíos. No puede probar una solución directamente con el cliente. Debe planificar por adelantado todos los casos de borde y asegurarse de que su tema sea lo más personalizable posible. Si no tienes experiencia, lo más probable es que algunas cosas se deslicen por las grietas. Por suerte para ti, hemos recurrido a nuestra sabiduría tan duramente ganada para ayudarte a evitar repetir los mismos errores que cometimos.
WordPress tiene la opción de hacer una publicación protegida con contraseña: los visitantes deben poder acceder a este tipo de contenido solo después de escribir la contraseña. No necesita hacer nada especial con respecto a la publicación en sí, pero si se olvida de verificar antes de mostrar los comentarios, los visitantes seguirán viendo todos los comentarios en la publicación protegida, lo que en primer lugar anula el propósito de proteger la publicación. Puedes remediar esto con un simple check in comentarios.php:
Hay un archivo de plantilla especial, attachment.php, que se utiliza cuando un visitante hace clic en un archivo adjunto. Los archivos adjuntos pueden ser imágenes, videos, archivos de música ... lo que se inserta con los botones de archivos adjuntos en el editor:
Creando attachment.php no es obligatorio: si la plantilla no está allí, el navegador solo mostrará el archivo, con un complemento apropiado si es necesario. Yo diría que la principal ventaja de attachment.php Es cuando el visitante decide ver, por ejemplo, una imagen a tamaño completo, la navegación del sitio permanece accesible. También puede mostrar información personalizada sobre el archivo adjunto. El tema predeterminado de TwentyTen en WordPress 3.0 tiene una interesante attachment.php que muestra tamaños de imagen.
Accentsconagua
if (wp_attachment_is_image ()) echo ' | '; $ metadata = wp_get_attachment_metadata (); printf (__ ('El tamaño completo es% s píxeles', 'twentyten'), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ ('Enlace a la imagen a tamaño completo', ' veinte '')), $ metadatos ['ancho'], $ metadatos ['altura'])); Es posible que haya escuchado sobre el soporte de idiomas de derecha a izquierda, pero a menos que usted mismo sea competente en uno de esos idiomas, puede imaginar que todo es muy complicado..
La introducción de soporte en su tema para los idiomas que se escriben de derecha a izquierda, como el árabe y el hebreo, es bastante fácil. Los estilos en rtl.css anulará a los principales style.css cuando la variable WP_LANG en settings.php se establece en un idioma de derecha a izquierda, por ejemplo, árabe:
define ('WP_LANG', 'ar') Tu rtl.css Primero necesita esta declaración:
cuerpo dirección: rtl; unicode-bidi: incrustar;
La primera propiedad se explica por sí misma. El segundo 'abre un nivel adicional de incrustación con respecto al algoritmo bidireccional' (W3C).
los rtl.css El archivo no necesita duplicar cada estilo en style.css, solo las cosas que necesitan cambiar al leer de izquierda a derecha. Piense como si el sitio se viera en un espejo: los flotadores cambian de dirección (float: la izquierda se convierte en float: derecha y viceversa) y los márgenes y el relleno se invierten (margin-right: 18px se convierte a margin-left: 18px; margin-right: 0). También piense en grandes secciones del sitio: ¿en qué dirección flotará el encabezado? No olvide todos los pequeños detalles, como revertir los guiones de sus listas de definiciones y citas en bloque. Para familiarizarse con él, puede intentar cambiar el idioma al árabe o al hebreo en sitios como Facebook o Wikipedia, o visitar sitios internacionales como Al Jazeera..
Lo creas o no, eso es todo lo que hay que saber..
Para diseñar el editor TinyMCE que viene con WordPress, simplemente cree un archivo llamado editor-style.css en su directorio de temas. Es muy fácil de rellenar, ya que solo necesita hacer coincidir la tipografía con la de la hoja de estilo principal, y no hay necesidad de preocuparse por el diseño del bloque. TinyMCE tiene algunas peculiaridades sin embargo. Puede evitar que las líneas sean demasiado largas estableciendo una propiedad de ancho máximo en la clase .mceContentBody.
Si está incluyendo soporte para idiomas de derecha a izquierda a través de rtl.css, También debe agregar un archivo llamado editor-style-rtl.css, como algunas propiedades, como los márgenes de lista y los rellenos, también deben cambiarse en el editor.
Entradas paginadas (que no deben confundirse con una paginada lista de entradas) están separados en páginas por su autor con el Etiqueta rápida Es cierto que esta característica no parece ser muy útil en la mayoría de los sitios de WordPress, pero si olvida hacer su parte, los visitantes no podrán leer más allá de la primera página. Para permitir que se lea todo el contenido, debe usar la etiqueta wp_link_pages dentro de The Loop
wp_link_pages (array ('before' => 'Páginas: ',' después de '=>'
',' next_or_number '=>' number ')); Para una publicación con tres páginas, esto genera lo siguiente:
Páginas: 1 2 3
Los visitantes pueden hacer clic en los números de la página para leer la publicación completa. La documentación completa de esta función se puede encontrar en el códice de WordPress..
Si bien no puede diseñar todos los widgets posibles bajo el sol, es una buena idea verificar que todos los widgets que se suministran con WordPress se muestren de manera convincente. Todos ellos pueden recibir un título opcional y algunos tienen diferentes apariencias. Por ejemplo, el Categoría El widget puede mostrarse como un menú desplegable y también mostrar múltiples niveles de categorías o etiquetas anidadas, así que asegúrese de que está diseñando listas anidadas. Preste especial atención a la wiget Calendario. Es una tabla, y generalmente querrás que los días estén centrados en sus celdas, para que se alineen con los días de la semana en el encabezado. En la primera imagen, los números se ven ligeramente fuera de lugar, mientras que están alineados correctamente en la segunda imagen.
Finalmente, ayudará si comienza por diseñar buenos estilos para el .widget Clase, ya que se aplicará a todos los widgets, incluso aquellos provenientes de terceros. En particular, con diseños flexibles, asegúrate de que tus widgets no se estiren excesivamente, ya que eso los hace parecer realmente extraños.
Los comentarios son un poco de enigma de diseño. Hay muchas cosas para mostrar (avatares, nombres de comentaristas, fechas de comentarios, cuerpo de comentarios, botones de respuesta), por lo que debe darle un poco de espacio, pero al mismo tiempo, no debe abrumar el contenido principal. , y debe ser visualmente distinto de alguna manera. Los comentarios con hilos complican todas estas dificultades, porque también es necesario distinguir las respuestas. Generalmente, esto se logra con un margen, pero como no puede saber cuántos niveles de respuestas habrá, siempre corre el riesgo de no permitir suficiente ancho o permitir demasiado.
Además, tenga en cuenta que el formulario de respuesta no solo aparecerá en la parte inferior de la página, sino también en el centro de la cadena de comentarios cuando alguien haga clic en el botón de respuesta. Por lo tanto, los márgenes y el relleno deben ser adecuados para ambos casos. También está el enlace 'cancelar respuesta', que debe ser estilizado y colocado.
Finalmente, debe asegurarse de que la paginación de comentarios funcione, que los comentarios se representen correctamente, cuando hay muy pocos, y cuando hay muchos, y que los comentarios enlazados no desborden los límites de su contenedor. Tenga cuidado de no mezclar los comentarios, y no olvide revisar el diseño para ver cuándo están habilitados y deshabilitados los avatares.
wp_footer () y wp_head () Llamada wp_footer () Justo antes de cerrar la etiqueta del cuerpo, y wp_head () Justo antes de la etiqueta de cierre de la cabeza. Ambas funciones son enlaces de acción, que pueden ser utilizados por los desarrolladores de complementos y temas. Si los omite, es posible que algunas funciones y complementos no funcionen, incluidos los encabezados personalizados..
Aunque muchos temas aún dependen de complementos, como TimThumb, WordPress, desde la versión 2.9, incluye soporte para miniaturas ('imágenes destacadas') fuera de la caja. Para aprovechar esta funcionalidad, simplemente agregue algunas líneas en funciones.php:
add_theme_support ('post-thumbnails'); set_post_thumbnail_size (70, 70); La primera línea le dice a WordPress que su tema es compatible con miniaturas, mientras que la segunda fuerza el tamaño de la miniatura a 70x70px, para evitar romper su diseño con miniaturas de diferentes tamaños. Además, puede elegir la política de cambio de tamaño. El ejemplo anterior simplemente cambiará el tamaño de la imagen, mientras que
set_post_thumbnail_size (70, 70, TRUE);
También recortará la imagen para que se ajuste a la proporción dada. También puede hacer disponibles tamaños de miniaturas adicionales, para usarlos en diferentes áreas del sitio:
add_image_size ('big-thumb', 500, 500); Ahora,
the_post_thumbnail ();
muestra una miniatura de 70x70 y
the_post_thumbnail ('big-thumb'); muestra una miniatura de 500x500.
WordPress 3.0 introdujo los tan esperados menús personalizados, por lo que es hora de que sus usuarios se beneficien de esta función. Después de registrar soporte de tema, así:
register_nav_menu ('main_nav', __ ('Menú de navegación principal', 'mitema')); ... puede mostrar un menú personalizado con wp_nav_menu ():
wp_nav_menu (array ('theme_location' => 'main_nav')); Tenga cuidado, ya que el sistema le permite insertar elementos anidados, lo que puede conducir a resultados extraños si no planea para ellos.
Incluso si proporciona menús desplegables o menús de estilo de la barra de navegación, es difícil mostrar con elegancia más que tantos niveles de navegación. Para proteger su diseño, decida un nivel por debajo del cual todos los elementos se mostrarán igual o desactive la visualización de niveles más bajos. Por ejemplo, para limitar la visualización a dos niveles, use:
wp_nav_menu (array ('depth' => 2)); Esta es una nueva característica en WordPress 3.0, y también es la más fácil de implementar. Es literalmente una línea:
add_custom_background ();
¡Eso es! Los usuarios ahora pueden elegir cualquier fondo personalizado que quieran:
Con el mismo espíritu, pero con un poco más de esfuerzo, puede permitir cambiar el fondo del encabezado del sitio y también el color del título del sitio. Esta característica no funcionará a menos que empieces por definir un grupo de constantes. Reemplace 'su ancho' y 'su altura' con cualquier medida que se ajuste a su tema:
define ('HEADER_TEXTCOLOR', '000'); define ('HEADER_IMAGE', get_bloginfo ('stylesheet_directory'). 'ruta / a / tu / imagen'); define ('HEADER_IMAGE_WIDTH', 'yourwidth'); define ('HEADER_IMAGE_HEIGHT', 'yourheight'); Una vez que esté en su lugar, debe escribir la función que aplicará el fondo a su encabezado. Como no hay una marca estándar para el encabezado de un sitio, WordPress no puede adivinar cómo aplicar el CSS requerido para usted. Por ejemplo, para agregar un fondo personalizado al div con el id del 'encabezado', haga esto:
También debe crear una función, por ejemplo mytheme_admin_preview_header (), para diseñar el panel de vista previa en el administrador para que coincida con el resultado final. El área de vista previa tiene el ID #headimg, mientras que el título del sitio y la descripción del sitio tienen ID #name y #desc. Experimenta con la vista previa hasta que estés satisfecho. Finalmente, para habilitar el Apariencia> Encabezado panel, llamada:
add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header'); No todos desean que su blog se muestre en inglés. Envuelva cada cadena que los usuarios necesiten leer con __ () si desea traducirla, o _e () si también desea repetirla, como:
__ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // También imprime la cadena traducida. El segundo argumento debe ser un identificador único para su tema, para que las diferentes traducciones no entren en conflicto.
Después de que cada cadena se haya envuelto en una función de traducción, debe usar el makepot.php guión. La forma recomendada de obtener este script es instalar Subversion y luego ejecutar:
svn co http://svn.automattic.com/WordPress-i18n/tools/trunk
Obtendrás un directorio, denominado 'trunk' que contiene, entre otros, makepot.php.
El script se ejecuta de esta manera
php makepot.php wp-theme mytheme
mi tema es la ruta a su directorio de temas. Obtendrá un archivo llamado mytheme.pot, que está listo para ser utilizado en un programa, como Poedit, para producir un .correos archivo que contiene una traducción.
Para terminar, necesita decirle a WordPress dónde se encuentran las traducciones en su directorio de temas, por ejemplo:
load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages'); Aquí, 'mytheme' es el identificador único para su tema; El segundo argumento dice dónde están los archivos de traducción. TEMPLATEPATH es una constante especial definida por WordPress que siempre apunta al directorio del tema actual.
Este es un poco opcional, ya que es posible que desee dejarlo a criterio de los usuarios u otros desarrolladores. Sabrá que WordPress admite la adición de campos personalizados en cada publicación. En muchos temas, estos campos generalmente no se muestran, a menos que se usen para una función especial. Algunos usuarios pueden estar confundidos porque creen que pueden usar campos personalizados para generar la información que deseen.
Hay una funcion,
the_meta ()
para ser llamado en The Loop, que muestra todos los campos personalizados adjuntos a una publicación, como una lista desordenada en forma de clave: valor. Es cierto que no es muy útil, pero podría ser mejor que dejar a alguien preguntándose por qué los campos personalizados no se muestran en ningún lugar.
Una de las dificultades de crear un sistema dinámico, como WordPress, es que hay muchos casos extremos que no ocurren con demasiada frecuencia, pero que aún pueden arruinar la apariencia del sitio cuando lo hacen. Piensa en publicaciones con comentarios cerrados, o con cuerpos muy cortos. Asegúrate de que no se introduzcan espacios extraños o que los elementos no estén enmascarados porque no se muestra algo. La sección de comentarios podría no mostrarse si los comentarios no están permitidos, o un campo de entrada de contraseña podría reemplazar el contenido habitual de la publicación cuando la publicación está protegida por contraseña.
Además, trate de hacer coincidir la forma en que los comentarios están diseñados con el cuerpo principal. Este último punto requiere un cuidado especial, ya que, en general, el espacio es más limitado en el área de comentarios, especialmente cuando se usan comentarios con hilos y cada respuesta se desplaza hacia la derecha (o hacia la izquierda, para RTL).
WordPress.org ofrece un archivo de contenido de muestra que puede importar a su instalación de WordPress, que contiene una variedad de publicaciones de prueba, páginas e imágenes..
Para importar el archivo en WordPress 3.0, primero debe instalar el complemento WordPress Importer. Entonces escoge Herramientas> Importar> WordPress. Asegúrese de marcar la casilla 'Descargar e importar archivos adjuntos' cuando se le solicite. De lo contrario, no obtendrá las imágenes asociadas a algunas publicaciones de muestra..
Una vez finalizada la importación, puede utilizar esta lista de verificación para determinar si el contenido se muestra como debería.
Hemos aprendido que las cosas a tener en cuenta vienen en múltiples variedades. Algunas funciones rara vez se usan, otras son oportunidades de personalización, mientras que otras son más similares a problemas de diseño comunes, que se repetirán con cualquier sitio de WordPress que diseñes. Nuestra lista está lejos de ser exhaustiva, ¡así que queremos saber de usted en los comentarios! ¿Cuáles crees que son las piezas de funcionalidad más olvidadas??
