|

Trucos para la creación de un theme para WordPress

ByLuis

Buen artículo en la que se nos cuenta una serie de trucos que usa el autor para realizar sus themes de WordPress. Mi opinión personal es que el código para hacer themes para WordPress no es demasiado bueno, pero claro, seguro que hay alguien que opina todo lo contrario, pero para los que opinen como yo seguro que estos consejos le vienen genial.
Empieza explicando diferentes usos de las etiquetas condicionales, las cuales nos indican si estamos en el home, visualizando una entrada… Con estas condiciones podemos resaltar dinámicamente los menús según en la opción que estemos, cambiar el título de la página según en la que nos encontremos, añadir contenido y muchas opciones más.
También nos explica cómo crear plantillas para categorías específicas, para lo cual solo deberemos añadir -n a category.php, pudiendo personalizar nuestro diseño dependiendo de la categoría a la que accedamos.
Otro ejemplo que nos cuenta es el modo de añadir la publicidad después del primer post, que quien dice después del primer post dice cada cierto número de posts, si se sigue el mismo método.
Una parte importante del post trata sobre las query posts, las cuales nos permiten controlar los posts que aparecen. Pudiendo así mostrar los últimos posts, posts específicos o excluir algunos.
Para finalizar también destacar los consejos sobre wp_list_pages, la plantilla Page o los consejos de configuración de WP.
WordPress Theme Hacks

Similar Posts

Añadir tus propias opciones en Theme Customizer de WordPress 3.4

ByLuis

WordPress 3.4 ha añadido la opción de theme customizer, la cual permite modificar las opciones del theme y darle el aspecto que deseas de forma muy visual y sencilla. En estos momentos, por lo que he podido ver, solo permite modificar el background y poco más. Pero viendo y pegándome con el código he podido ver cómo añadir mis propias opciones.

El ejemplo que voy a poner permite elegir entre tres tipos de fuente de Google Webfonts y modificar las css para usar ese tipo de letra.

Aviso que el código quizás no sea el mejor, pero realizar ingeniería inversa no siempre es fácil y tampoco he visto otro sitio donde lo hagan.

Lo primero que se tiene que hacer es crear las opciones en el panel de customizer. Para ello hay que crear una sección (section “Fuente”) y asignarle unas opciones (settings) y añadirle unos controles (control) a las opciones. Existen controles por defecto, el de elegir el color está muy bien, pero en mi caso me he creado uno personalizado que muestra un control radio modificado para que el label del radio muestre la tipo de letra en cuestión.

add_action('customize_register', 'mi_theme_customizer', 1);
function mi_theme_customizer() {
  global $customize;

  if($customize) {
    // La seccion
    $customize->add_section('mi_font', array(
      'title'=>'Fuente'
    ) );
    // La opcion
    $customize->add_setting( 'mi_font_family', array(
      'control' => 'color', // esto ni idea de para que sirve, realmente no es un control tipo color y funciona
      'type' => 'option'
    ) );

    $customize->add_control( 'mi_font_family', array(
      'settings' => 'mi_font_family',
      'section'  => 'mi_font',
      'type'     => 'font_radio',
      'choices'  => array('Trocchi', 'Great Vibes', 'Bad Script') // las fuentes de google
     ) );
        
  }
}

Una vez creado los controles, añado el código que dibuja (render) mi control personalizado, primero añado los css para que dibuje las fuentes de Google y luego dibujo el control en sí. He usado Javascript en vez de PHP porque parece ser que el código no está del todo completo, y no hay un filtro para crear tu propio control, por lo que tengo que añadirlo mediante jQuery a un elemento para que el Javascript del customizer tenga en cuenta cuando selecciono una opción y refresque el preview del theme.

// Añado los css de google webfonts mediante javascript para tener luego el nombre de las fuentes y usarlo para crear los radio buttons
add_action('customize_controls_print_scripts', 'mi_customize_scripts');
function mi_customize_scripts() {
  $fonts = array('Trocchi', 'Great Vibes', 'Bad Script');
?>

type == 'font_radio') {
    if ( empty( $control->choices ) )
      return;

    $name = '_customize-font-radio-' . $control->id;

    ?>
    label ); ?>

Y ya por último solo falta usar la opción guardada para mostrarla en el theme

add_action('wp_head', 'mi_custom_styles');
function mi_custom_styles() {
  $option = get_option('mi_font_family');
  // El customizer modifica este filtro para refrescar el preview
  $option = apply_filters('option_mi_font_family', $option);
  if ($option) {
    echo "";
    echo '';
  }
}

Y esto es todo, no sé si hay una forma mejor de hacerlo, estoy abierto a sugerencias.

|

Traducción del botón de FeedBurner al español

ByLuis

boton-feedburner-castellano.gif Hasta Sentido Web, como primera nano que lanzamos en castellano, no habíamos puesto atención a la necesidad de traducir el readers de los botones de FeedBurner que muestran el número de suscriptores.

Como no hay ninguna referencia “oficial” (aviso de Jordi), y previa consulta a Juan Luis (representante de FeedBurner en España), ahí va el truco que varios sitios ya aplican…

Solo tienes que añadir en el código del botón justo después de animo=0″ si tú botón es el estático o anim=1″ si tienes el animado y asegurándote de borrar la comilla al lado del 0 o del 1 ya que la pondremos luego: &label=lectores". El lectores lo puedes sustituir por un texto de 8 caracteres para respetar el tamaño del botón. Para nosotros, el ideal sería suscriptores pero sale cortado.

El código de nuestro botón:

<a href="http://feeds.feedburner.com/sentidoweb"><img src="http://feeds.feedburner.com/~fc/sentidoweb?bg=008585&fg=ffffff&anim=0&label=lectores" height="26" width="88" border="0" alt="Feed de Sentido Web" /></a>
|

Añadir clase a la imagen destacada de WordPress según el tamaño

ByLuis

Hace bastante que no escribía, sobre todo por falta de tiempo, pero quería escribir sobre este pequeño truco de WordPress. Cuando añadimos una imagen destacada en un post de WordPress nos podemos encontrar con que la imagen ocupa todo el ancho (lo más normal) o que no ocupa tanto, con lo que nos encontramos que la imagen queda muy sola y el diseño queda feo.

Para solucionar esto, deberemos añadir un filtro, comprobar el tamaño de la imagen y el del ancho del contenido y en el caso de que creamos que es conveniente (por ejemplo la mitad del ancho del contenido) añadir una clase a la imagen:

function mi_post_thumbnail_html($html) {
  // Se suele recomendar definir la variable $content_width para ocasiones como esta
  global $content_width;
  preg_match('#width="([^"]+)"#', $html, $s);
  if (isset($s[1]) && $s[1] < $content_width/2) {
    preg_match('#class="([^"]+)"#', $html, $c);
    if (isset($c[1]) && strpos($c[1], "right") === FALSE) {
      return str_replace('class="'.$c[1].'"', 'class="'.$c[1].' right"', $html);
    }
  }
  return $html;
}
add_filter('post_thumbnail_html', 'mi_post_thumbnail_html');
|

Post2PDF 1.4: error XSS corregido

ByLuis

Post2PDFNueva versión de Post2PDF, plugin de WordPress para exportar los plugins a formato PDF.
Esta versión corre a cargo de Alexander Concha, quien detectó un error de XSS en el plugin (¡ya me vale!) y además de solucionarlo, le ha dado un buen repaso a todo el plugin mejorándolo en muchos aspectos, por lo cual le estoy muy agradecido, ya que a parte de solucionar un error importante, he podido aprender bastante de su experiencia en WordPress.
Como novedad importante, hay que decir que el plugin solo es compatible con WordPress 2.x, las pruebas realizadas con versiones anteriores no han sido satisfactorias.
Post2PDF

Realizar búsquedas en WordPress únicamente por el título

ByLuis

Si por un casual necesitas que tu WordPress realice las búsquedas por el título del post y que ignore el contenido, tan sólo hay que añadir un filtro a tu functions.php, lo cual también sirve para editar las condiciones de búsquedas y añadirle o quitarle condiciones:

add_filter('posts_search', 'mi_search_title');
function mi_search_title($search) {
  preg_match('/%([^%]+)%/', $search, $m);
  if (isset($m[1])) {
    // Original
    // " AND (((wp_posts.post_title LIKE '%termino%') OR (wp_posts.post_content LIKE '%termino%')))  AND (wp_posts.post_password = '') "
    return " AND wp_posts.post_title LIKE '%$m[1]%' AND (wp_posts.post_password = '') ";
  } else {
    return $search;
  }
}

Gutenberg Snippet block

ByLuis

Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.

Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg

Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo

//  Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';

import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n

export const name = 'sentidoweb/snippet';

export const settings = {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
	icon: icon,
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'code', 'sw-snippet' ),
		__( 'format', 'sw-snippet' ),
		__( 'snippet', 'sw-snippet' ),
	],

	attributes,
	edit,
	save,
};

Snippet Block en Github