CSS personalizado para cada entrada en Wordpress
Escrito el 08 Feb, 2010 por Alexis en Wordpress
Como todos lo sabemos Wordpress es muy flexible y con él podemos hacer casi cualquier cosa, en esta ocasión en particular vamos a crear un Box para poder estilizar nuestras entradas por medio de CSS.

Como lo sabrás cada Theme tiene su propia hoja de estilos que es lo que le formato en definitiva. Si necesitáramos personalizar nuestras entradas, tendríamos que editar la hoja de estilos del Theme; cosa que puede ser algo molesto si solo necesitamos personalizar una entrada en concreto.
Con esta pequeña función, estaremos añadiendo un Box para que la hora de crear un Post o Pagina podamos insertar un estilo para cada entrada/pagina en concreto.
Por medio de filtros y acciones esta función insertar en el header de nuestro Theme, el estilo que le hayamos aplicados. Solo tenes que cerciorarte que Theme cuente con wp_head(); dentro del Header.
Uso
En tu archivo functions.php inserta lo siguiente:
//Custom CSS add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); function custom_css_hooks() { add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()){ if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } } //End Custom CSS
Ahora cada vez que escribas una entrada/pagina encontraras este box para insertar tus estilos:

Como lo veras esta función es bastante flexible por lo sera posible adaptarla, para por ejemplo también poder incluir scripts en nuestro Header.









Sin comentarios to “CSS personalizado para cada entrada en Wordpress”
Trackbacks/Pingbacks
- Bitacoras.com
Back to Top