Contenido
- Crear un nuevo tipo de publicación personalizada
- Creando la página de archivo
- Creando la página única
- En conclusión
El desarrollo web puede cambiar rápidamente, pero dos cosas que llegaron para quedarse son WordPress y el diseño receptivo. Es imprescindible saber cómo crear temas y complementos de WordPress adaptables.En este tutorial, veremos cómo crear un complemento de WordPress y una plantilla de tema para una cartera receptiva.
Trabajaremos con dos plantillas simuladas: una página de archivo, que enumerará todos los proyectos recientes, y una sola página, que mostrará un proyecto específico. La página de archivo de la cartera es bastante simple con un encabezado y tres columnas de proyectos en todo su ancho. Esto se reducirá a dos columnas, luego a una columna, a medida que la pantalla se haga más pequeña. El HTML y CSS están disponibles en GitHub. Cada proyecto de la página tendrá esta estructura.
Vea un screencast exclusivo de este tutorial:
Este es el HTML que generará el bucle de WordPress:
div> img src = "project.png"> h3> Nombre del sitio / h3> p> Breve descripción y un enlace a href = "#"> leer más ... / a> / p> / div>
La página única tendrá un diseño similar, envolviendo todo el texto en un contenedor llamado .proyecto en vez de .tarjeta. El CSS también será bastante ligero y escalado. También puede observar en los archivos del sitio que hay un style.scss expediente. He desarrollado todo el CSS con Sass, pero no temas: los style.css está compilado de forma legible.
Crear un nuevo tipo de publicación personalizada
Un tipo de publicación personalizada es un objeto en WordPress que nos permite agregar cualquier tipo de contenido que queramos al editor de WordPress, tratándolos de la misma manera que las publicaciones. En una nueva instalación de WordPress, hay opciones de menú para Publicaciones y Páginas. Ambos se consideran tipos de publicaciones que manejan el contenido de manera diferente. Con los tipos de publicaciones personalizados, podemos agregar opciones para crear nuevos tipos de contenido en el menú de administración de WordPress. Crearemos un tipo de publicación personalizada llamado Portafolio.
Vamos a desarrollar este tipo de publicación personalizada como parte de un complemento de WordPress más grande para proyectos de cartera. Si bien podríamos agregar la funcionalidad al tema, esta es una mala práctica porque entonces nuestro contenido está ligado a nuestro diseño: si cambiamos el tema, perdemos el portafolio. Manejaremos la visualización a través de dos métodos: plantillas / etiquetas de plantilla y códigos cortos que se pueden usar a través del editor.
El primer paso es definir el complemento. Crea una carpeta en / wp-content / plugins / y nómbralo como quieras. He nombrado el mío / jlc-proyectos /. Dentro de esa carpeta, cree un archivo con el mismo nombre (por ejemplo, jlc-projects.php) y agregue este código:
? php / * Nombre del complemento: Joe’s Portfolio Plugin URI del complemento: https://github.com/jcasabona/wp-portfolio Descripción: ¡Un complemento simple que crea y muestra una cartera de proyectos con WordPress utilizando tipos de publicaciones personalizadas! Autor: Joe Casabona Versión: 1.0 URI del autor: http://www.casabona.org * / define (’JLC_PATH’, WP_PLUGIN_URL. ’/’. Plugin_basename (dirname (__ FILE__)). ’/’); define ('JLC_NAME', "Complemento de cartera de Joe"); require_once (’jlc-project-cpt.php’); ?> var13 ->
Aquí están sucediendo algunas cosas. La primera es la definición de complemento estándar para un complemento de WordPress; las siguientes líneas crean constantes y luego incluyen los archivos que el resto de complementos necesita. En este punto, solo hay otro archivo: jlc-proyecto-cpt.php.
También notará que estoy usando el prefijo JLC_ (o jlc-) para todo. Debe elegir su propio prefijo para usar. El prefijo de variables y nombres de funciones reducirá la posibilidad de que el complemento entre en conflicto con otros temas o complementos.
Antes de saltar a jlc-proyecto-cpt.php, Quiero agregar un fragmento más de código a jlc-projects.php. El siguiente código creará un nuevo tamaño de imagen, que usaremos con nuestro tipo de publicación personalizada:
if (function_exists (’add_theme_support’)) {add_theme_support (’post-thumbnails’); add_image_size ('jlc_project', 1100, 640, verdadero); }
Ahora es el momento de crear jlc-proyecto-cpt.php. Solo discutiré el código importante aquí, pero puede encontrar el código completo en el repositorio de GitHub. Primero (después de la apertura ? php tag) definimos el tipo de publicación personalizada:
add_action ("init", "jlc_projects_register"); function jlc_projects_register () {$ args = array ('label' => __ ('Portafolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capacity_type '=>' publicar ',' jerárquico '=> verdadero,' has_archive '=> verdadero,' apoyos '=> matriz (' título ',' editor ',' miniatura '),' reescribir '=> matriz (' slug '=>' portafolio ',' with_front '=> falso)); register_post_type ('portafolio', $ args); register_taxonomy ("jlc-project-type", array ("portfolio"), array ("jerárquico" => verdadero, "etiqueta" => "Tipo de proyecto", "singular_label" => "Tipo de proyecto", "reescribir" = > verdadero)); }
Esta es su función de definición estándar de tipos de publicaciones personalizadas. Agregamos una acción para llamarlo en init, luego enviamos nuestra lista de argumentos a register_post_type (), junto con la babosa del tipo, que será "cartera". Después de registrar el tipo de publicación, registramos la taxonomía personalizada para que coincida con el tipo de publicación. Es importante mantener estas dos funciones juntas. Si no lo hace, y la taxonomía de alguna manera se registra primero, WordPress arrojará un error.
Una vez definido el tipo de publicación personalizada, es hora de agregar los metadatos personalizados que queremos usar. Nuestro tipo de publicación personalizada admite un título, el editor (que servirá como texto del cuerpo) y una miniatura, que es donde irá la imagen destacada. Hay una cosa más que me gusta agregar a las piezas de mi portafolio: una URL al sitio web que estoy mostrando. Primero, crearemos la función que agregará este cuadro en el administrador:
add_action ("admin_init", "jlc_projects_admin_init"); function jlc_projects_admin_init () {add_meta_box ("jlc-projects-meta", __ ("Project Link"), "jlc_projects_options", "portfolio", "side", "low"); } function jlc_projects_options () {publicación $ global; if (definido ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; $ personalizado = get_post_custom ($ publicación-> ID); $ enlace = $ personalizado ["jlc_projects_link"] [0]; ?> var13 -> input name = "jlc_projects_link" placeholder = "http: //" value = "? php echo $ link;?> var13 ->" />? php}
Estas funciones son bastante sencillas. Cuando se inicia el administrador (es decir, se carga), llamaremos a una función llamada jlc_projects_admin_init () que creará un nuevo metabox para elementos de cartera. Para generar ese cuadro, una nueva función, jlc_projects_options (), se llama.
Una vez dentro del opciones función, simplemente tomamos el Enlace valor, que hemos llamado jlc_projects_linke imprímalo. Pero primero, queremos asegurarnos de que no se esté realizando un guardado automático. Si es así, probablemente perdamos datos. Después de eso, necesitamos realmente guardar los metadatos cuando se guarda la publicación:
add_action (’save_post’, ’jlc_projects_save’); function jlc_projects_save () {publicación $ global; if (definido ('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $ post_id; } else {update_post_meta ($ publicación-> ID, "jlc_projects_link", $ _POST ["jlc_projects_link"]); }}
Con la sección de administración para nuestros tipos de publicaciones personalizadas creada, es hora de agregar algunas funciones de interfaz para ayudar a mostrar nuestros proyectos a los visitantes. Consiste en una plantilla de archivo, una plantilla de una sola página y un código corto (no se trata en este tutorial). Pero antes de hacer eso, hay otra función que vamos a crear para mostrar imágenes: picturefill.js.
Esta pieza de JavaScript (puede encontrar el repositorio de GitHub aquí) le permite definir un conjunto de consultas de medios para cambiar una imagen a una versión más amigable con el tamaño de la pantalla en la que se está viendo. Esto también tiene implicaciones para el tiempo de carga, ya que probablemente pueda suponer que una pantalla más pequeña significa un dispositivo móvil que usa 4G, 3G o incluso EDGE. Sé que no siempre es así, pero es mejor que nada.
Puede ver el patrón de marcado para un elemento de relleno de imagen estándar en el repositorio de GitHub. Podemos tener un número ilimitado de lapso> elementos para cada tamaño de la imagen que tenemos. También hay una alternativa para los usuarios sin JavaScript. Como puede imaginar, dado que WordPress crea múltiples versiones de cada imagen que cargamos usando Media Uploader, se adapta muy bien a picturefill.js. Lo primero que debemos hacer es cargar el script, que se encuentra en el / js / carpeta en el directorio de nuestro complemento. Agregamos el siguiente código a jlc-projects.php:
function jlc_projects_scripts () {wp_enqueue_script ("picturefill", JLCP_PATH.’js / picturefill.js ", array ()); } add_action (’wp_enqueue_scripts’, ’jlc_projects_scripts’);
Esto cargará nuestro JavaScript con los scripts que están cargando otros complementos. También asegurará que no estemos cargando picturefill.js más de una vez.
Dado que nuestros proyectos utilizarán la sección de imágenes destacadas para mostrar la captura de pantalla, podemos reemplazar el marcado predeterminado de la imagen destacada utilizando el post_thumbnail_html filtrar. Tenga en cuenta que esta función reemplazará todas las secciones de imágenes destacadas en el sitio. Si esto pudiera causar un conflicto (probablemente lo hará), debe agregar algunos condicionales a su complemento para asegurarse de que este filtro solo se use en las páginas de la cartera.
add_filter (’post_thumbnail_html’, ’jlc_projects_get_featured_image’); función jlc_projects_get_featured_image ($ html, $ aid = false) {$ tamaños = matriz ("miniatura", "mediana", "grande", "jlc_project", "completa"); $ img = ’abarcan data-picture data-alt =" ’. get_the_title ().’ ">’; $ ct = 0; $ ayuda = (! $ ayuda)? get_post_thumbnail_id (): $ ayuda; foreach ($ tamaños como $ tamaño) {$ url = wp_get_attachment_image_src ($ aid, $ tamaño); $ ancho = ($ ct tamaño de ($ tamaños) -1)? ($ url [1] * 0.66): ($ ancho / 0.66) +25; $ img. = ’span data-src =" ’. $ url [0].’ "’; $ img. = ($ ct> 0)? ’Data-media =" (min-width: ’. $ Width. ’Px)"> / span> ’:’> / span> ’; $ ct ++; } $ url = wp_get_attachment_image_src ($ ayuda, $ tamaños [1]); $ img. = ’noscript> img src =" ’. $ url [0].’ "alt =" ’. get_the_title ().’ "> / noscript> / span>’; return $ img; }
Aquí están sucediendo algunas cosas. La primera es que la función tiene una matriz de todos los tamaños de imagen en WordPress que queremos usar. Si tiene sus propios tamaños definidos, deberá agregarlos aquí. Esto es para que el elemento de relleno de imagen se rellene con precisión. Después de alguna configuración (definir el tamaño de la imagen, abrir el elemento de relleno de imagen, inicializar un contador), se mueve a través del $ tamaños, imprimiendo una entrada de imagen para cada uno.
Para cada entrada, wp_get_attachment_image_src () se llama para obtener la URL de la imagen según el ID de la imagen (que get_post_thumbnail_id () devoluciones basadas en el ID de la publicación) y el tamaño. wp_get_attachment_ image_src () devuelve una matriz que incluye la imagen, el ancho, la altura y si está recortada o no. También hay un poco de matemática para calcular cuándo determinar los puntos de interrupción, así como cómo manejar la imagen en miniatura. No voy a discutir esto en detalle aquí, pero vale la pena señalar que este es un problema importante a resolver y cuyas soluciones están evolucionando rápidamente.
Ahora, cada vez que obtengamos la miniatura de la publicación, el HTML devuelto será de nuestra función.
Creando la página de archivo
A continuación, crearemos la plantilla de archivo para el nuevo tipo de publicación personalizada. Esto es lo que se mostrará de forma predeterminada y servirá como nuestra página principal de cartera.
(Nota: no crearemos la página de inicio del sitio en este tutorial, pero hacerlo requeriría una etiqueta de plantilla o un código corto que ejecutará un bucle personalizado usando WP_Query.)
Cree un nuevo archivo en cualquier directorio de temas que esté utilizando y llámelo archive-portfolio.php. La jerarquía de plantillas de WordPress es lo suficientemente inteligente como para saber que, cuando un usuario está en la página de la cartera, debe mostrar el contenido utilizando esta plantilla. Mi recomendación en este punto es copiar el page.php plantilla para esta plantilla. Simplemente reemplazaremos la parte de bucle.
Te recomiendo que uses una plantilla sin barra lateral o una plantilla de una sola columna. El CSS al que se hace referencia aquí funcionará un poco mejor. Así es como se ve nuestro Loop:
? php while (have_posts ()): the_post (); ?> var13 -> div>? php the_post_thumbnail (’jlc_project’); ?> var13 -> h3>? php the_title (); ?> var13 -> / h3> p>? php echo get_the_excerpt (); ?> var13 -> a href = "? php the_permalink ();?> var13 ->"> leer más ... / a> / p> / div>? php end while; ?> var13 ->
Esto debería ser bastante sencillo. Porque estamos reemplazando el HTML predeterminado para the_post_thumbnail (), el argumento de qué imagen usar no importa porque todos los tamaños se devolverán usando el marcado picturefill.js. Opté por usar get_the_excerpt () para excluir cualquier marcado incluido por el extracto().
Al diseñar un complemento que incluye algo de CSS, es importante que sea lo más mínimo posible para que no choque con el CSS del tema ni le dé al usuario la capacidad de excluir su CSS por completo. Dado que estamos creando plantillas dentro del tema, tenemos un poco más de margen de maniobra. Aquí hay una parte del CSS (generado por Sass) que agregué a cada proyecto en la página de archivo:
.card img {pantalla: bloque; margen: 0 automático; } pantalla @media y (min-width: 45.88em) {.card {display: inline-block; ancho: 40%; }} pantalla @media y (ancho mínimo: 54.62em) {.card {ancho: 44%; }} pantalla @media y (ancho mínimo: 76.38em) {.card {ancho: 29%; }} pantalla @media y (ancho mínimo: 99.4em) {.card {ancho: 30%; }
He determinado qué puntos de interrupción eran los mejores para colocar las tarjetas de proyecto una al lado de la otra. También hice que las imágenes destacadas se centraran automáticamente.
Creando la página única
Ahora crearemos la plantilla única para proyectos de cartera. Siempre que un usuario visite la página de un solo proyecto, esto es lo que se mostrará. Crea un nuevo archivo en tu tema, llámalo single-portfolio.php y copie otra plantilla para pegar allí (recomiendo lo que haya utilizado para archive-portfolio.php). Esta vez reemplazaremos el bucle con este código:
? php while (have_posts ()): the_post (); ?> var13 -> h2>? php the_title (); ?> var13 -> / h2>? php the_post_thumbnail (’jlc_project’); ?> var13 ->? php the_content ("Leer el resto de esta entrada"); ?> var13 ->? php if (function_exists (’jlc_projects_get_link’)) {$ jlc_link = jlc_projects_get_link ($ post-> ID); if ($ jlc_link) {?> var13 -> a href = "? php print $ jlc_link;?> var13 ->"> Visite el sitio / a>? php}}?> var13 ->? php end while; ?> var13 ->
Esto se parece a la plantilla de archivo, pero llamamos a una función adicional aquí: jlc_projects_get_link (). Agregaremos esto a nuestro complemento y devolverá la URL del proyecto actual.
En el caso de que no haya una URL, se debe devolver falso y no se muestra ningún botón. Esto es lo que la función (ubicada en jlc-projects.php) parece:
function jlc_projects_get_link ($ id) {$ url = get_post_custom_values (’jlc_projects_link’, $ pid); return ($ url [0]! = ’’)? $ url [0]: falso; }
El CSS de esta página dependerá en gran medida del tema: he usado algo de CSS para generar un botón agradable. Asegúrese de que cualquier CSS que cree usted mismo no interfiera con el tema principal.
En conclusión
Por ahora, hemos creado un complemento para agregar un nuevo tipo de publicación personalizada para las carteras, picturefill.js integrado para manejar mejor las imágenes y creamos dos plantillas de temas para mostrar la información.
El repositorio de GitHub para el tutorial contiene todo el código que se muestra aquí, más el tema que usé, un código corto y una etiqueta de plantilla.
Palabras: Joe Casabona
Este artículo apareció originalmente en el número 254 de la revista net.
