wordpress: no aparece el campo “imagen destacada” en el panel de control de admin

Buenas

Si estais creando vuestro propio theme y a la hora de crear un post no veis el campo “imagen destacada” teneis que hacer lo siguiente:

  • editar el archivo functions.php de la carpeta de vuestro template en wp-content/themes y añadir add_theme_support( ‘post-thumbnails’ );

A mi me ha librado de sufrir un infarto, espero os sea de ayuda xDD

Anuncios

Como crear un #theme para #wordpress desde cero con Bootstrap

fuente: Carlos Arturo – Falcon Masters (Youtube)

  • Primero descargamos una version basica de bootstrap
  • creamos style.css en la carpeta raiz de nuestro tema (wp-content\themes\nuestroTEMA) y añadimos las siguientes lineas para que wordpress nos reconozca el theme:
  • creamos en el raiz los archivos index.php, header.php y footer.php –> IMPORTANTE: antes de </head> en header.php agregamos <?php wp_head(); ?> y antes de </body>  en footer.php agregamos <?php wp_footer(); ?> entre otras cosas algunos plugins como Simple Lightbox pueden no funcionarnos
  • en el index.php (vacio completamente de codigo) agregamos estas lineas
    • <?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>
  • creamos el archivo sidebar.php (hueco para los widgets)
  • creamos archive.php (en este archivo se visualizan los articulos)
  • functions.php (libreria de funciones)
  • page.php
  • single.php (visualizacion de articulos)
  • slideshow (slide de imagenes del index – para cargarlo desde el index PHP–> include (TEMPLATEPATH. ‘/slideshow.php’); )
  • archive.php (para visualizar todos los posts de una misma categoria)

Hasta aqui la creacion de la estructura, ahora empezamos a añadir o modificar codigo

  • editamos header.php para establecer las rutas del site, por ejemplo las rutas de los css. con esta funcion de php bloginfo(‘template_url’) obtenemos la URL del template en nuestro servidor
  • en el archivo functions.php añadimos este codigo para poder modificar el menu desde el panel de control de wordpress  (apariencia > menus):
    • php:
      register_nav_menus( array(
      ‘menu’ => ‘Menu superior’,
      ));
  • y en el header quitamos el ul del menu estatico y añadimos este codigo donde teniamos el ul (seguramente dentro de los tags NAV):
    • wp_nav_menu(
      array(
      ‘container’ => false,
      ‘items_wrap’ => ‘<ul id=”menu-top”>%3$s</ul>’,
      ‘theme_location’ => ‘menu’
      ));
  • bucle para mostrar posts en index (y donde convenga – URL del capitulo del curso):
    • <?php if(have_posts()):while(have_posts()):the_post();?>
      codigo HTML del articulo
      <?php endwhile; else:?>
      codigo HTML si no hay ningun post
      <?php endif;?> con este bucle veriamos todos los posts de todas las categorias, si solo queremos ver los post de una categoria en concreto usaremos este codigo:sustituimos esta linea –> if(have_posts()):while(have_posts()):the_post(); por este bloque:
      $args = array(‘cat’ => 3);
      $category_posts = new WP_Query($args); if($category_posts->have_posts()) :
      while($category_posts->have_posts()) :
      $category_posts->the_post();
    • bueno acabo de encontrar en el curso otra manera mucho mas sencilla de mostrar solo posts de una categoria en concreto:
      <?php query_posts(‘category_name=NOMBRECATEGORIA’);?>
      añadiendo esto delante del bucle que muestra todos los posts ya estaria, asi de sencillo …
    • y ahora dentro del bucle para mostrar contenido del post:
      – titulo: the_title();
      – enlace al articulo: the_permalink();
      – fecha: the_date();
      – categoria: the_category();
      – descripcion: the_excerpt(); –> OJO ! cuando creamos un post debajo de la caja de texto del cuerpo del post tenemos otra llamada “extracto” esta info es la que mostramos con esta funcion, si no hemos puesto nada entonces wordpress automaticamente coge los datos de la caja de texto de descripcion o cuerpo del post (si no vemos ninguna caja extracto cuando estamos creando o editando el post vamos a opciones de pantalla y seleccionamos extracto)
    • cargar imagen del post, es un poco mas rollete … para cargar la imagen destacada del post tenemos que irnos a functions.php y añadir esto (url del capitulo):
      • add_theme_support(‘post-thumbnails’);
        add_image_size(‘list_blog_thumbs’,1000,220,true);
        entre comillas ponemos un nombre que usaremos de referencia, y los numeros son las medidas en pixeles que wordpress usara para redimensionar las imagenes al subirlas. Si necesitamos mas redimensiones distintas solo tenemos que copiar y pegar esta linea con las diferentes medidas y diferentes referencias
      • y ahora en index.php (o donde queramos cargar la imagen destacada del post) ponemos este codigo donde deberia ir a la imagen:
        <?php if(has_post_thumbnail()){ the_post_thumbnail(‘list_blog_thumbs’);}?> // como se puede ver usamos list_blog_thumbs que es la referencia usada en functions
    • por ultimo nos falta la paginación, si tenemos mas posts de los X configurados a mostrar en el panel de control/ajustes necesitamos movernos por los anteriores y los siguientes agregando este codigo debajo del bucle de mostrar posts:
      php next_post_link(‘<- Post Siguientes’)
      php previous_post_link(‘Post Anteriores ->’)
      – y delante del bucle agregamos esta linea para solventar un bug de wordpress con el paginador: php query_posts(“paged=$paged”);
  • ahora creamos donde se cargan los articulos (post):
    • abrimos el archivo single.php y le copiamos el siguiente codigo (esta sin estilos ni nada de nada, es un ejemplo ultra sencillo. Tal y como esta al pinchar en el index en el permalink nos cargara el contenido concreto del post
    • <?php get_header(); ?> <?php if(have_posts()):while(have_posts()):the_post(); ?>
           <?php the_title();?>
           <?php the_content();?>
      <?php endwhile;else: ?>
           Ta vacio !
      <?php endif; ?><?php get_sidebar(); ?>
      <?php get_footer(); ?>
    • y por ultimo añadimos el apartado “comentarios:
      <?php comments_template(); ?> –> url del capitulo
  • ahora creamos las paginas, page.php (practicamente es el mismo codigo que single.php para los posts, hacemos copy-paste –> url del capitulo)

pues este es mi esquemita super resumido del señor curso de wordpress que me ha ayudado mucho muchisimo, GRACIAS !

#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

fuente: http://librosweb.es/libro/bootstrap_3/

 

 

#php: #yii2 #framework, descargar e instalar #tema, #template, #plantilla, etc…

buenas

este ejemplo es para yii basic y con un template en concreto, el Greenery

lo descargais, y en la carpeta raiz del yii creais themes/greenery descomprimis el template

en config/web.php añadimos estas lineas dentro de components

‘view’ => [
‘theme’ => [
‘pathMap’ => [‘@app/views’ => ‘@app/themes/greenery’],
‘baseUrl’ => ‘@web/../themes/greenery’,
],
],

fijaros que ahora la web ya no funciona bajo views/layouts/main.php si no que ahora manda themes/greenery/layouts/main.php

un saludo

Como modificar o añadir #CSS a tu Tema #WordPress by @silocreativo

fuente: http://www.silocreativo.com/2014/04/como-modificar-anadir-css-tema-wordpress/

Es una pregunta muy recurrente sobre todo en los foros de WordPress. Supongamos que queremos modificar un elemento muy concreto de nuestro diseño: el tamaño de los H1, la gama de colores o simplemente la tonalidad de los botones sociales…estas modificaciones requieren en la mayoría de los casos de un poco de CSS. Pero no hay que alarmarse, existen varios métodos para hacerlo de forma segura y sin necesidad de tocar apenas código.

El otro escenario es que directamente tengas un extracto de CSS que quieras añadir a tu tema. WordPress por defecto no trae ningún editor ni campo para introducir estas reglas de estilos. Debemos por tanto modificar la plantilla o recurrir a algunos de los métodos alternativos (y recomendables) que te contamos:

Los temas WordPress se encargan del CSS

Salvo que un plugin en particular tenga un estilo propio y traiga consigo una hoja de estilos CSS propia, lo cierto es que toda la carga del diseño de nuestro WordPress pertenece exclusivamente a nuestra plantilla. Por tanto, ¿Porque no editamos directamente la plantilla?Error!

Las plantillas de WordPress son, al igual que los plugins, elementos que se actualizan, se mejoran y se sobreescriben sobre la versiones anteriores. Y además sin contemplaciones, no se guardan los cambios que se hayan realizado en dicha plantilla. Por tanto, eso quiere decir que si actualizas tu tema a una nueva versión, perderás todos los cambios que hayas realizado (en los archivos CSS o php claro está, el contenido no tiene nada que ver…)

Comentados los antecedentes, enumeremos cuales son los métodos más recomendables y su dificultad, para añadir o modificar vía CSS algún elemento de diseño.

1. Módulo JetPack CSS personalizado.

Sin duda el método más sencillo y bastante eficiente si ya utilizas Jetpack. Si no lo utilizas aún, consiste en descargar el plugin Jetpack (si no tienes cuenta en WordPress.com también puedes usar el plugin gratuito Slim JetPack) y activar el módulo de CSS personalizado.

Modificar el CSS de tu WordPress

Los pasos son sencillos:

1. Instalar plugin.
2. Activar el plugin. (posiblemente te pedirá que conectes con tu cuenta de WordPress.com)
3. Ir a JetPack (justo encima de Entradas en el menú lateral del panel de WordPress) y buscar el módulo de CSS personalizado.
4. Una vez activado, tendremos una nueva pestaña en el menú Apariencia > CSS personalizado. Voilá, un completo editor CSS de tu tema a tu alcance.

Nota: si optas por Slim JetPack, no es necesario que realices la activación en el paso 2, y en el paso 3, deberás acudir a Ajustes > Slim JetPack. El resto todo es igual.

Listo, ya tenemos activado nuestro editor donde pegar o escribir las reglas CSS que modificarán nuestro diseño o tema. Lo fantástico de este método, es que JetPack va a incluir los estilos CSS que definamos en este editor justo detrás en la carga de los que el tema trae por defecto (style.css), por lo que podemos sobreescribirlos sin problemas, sin miedo a perder los cambios en futuras actualizaciones.

2. Usando el plugin Simple Custom CSS.

Igual de fácil que usar el módulo de Jetpack. Después de instalar Simple Custom CSS y activar el plugin (aquí te enseñamos como hacerlo), simplemente tienen que navegar hasta Apariencia > Custom CSS y añadir tus lineas de CSS personalizado.

Editar CSS con plugin en WordPress

Fácil y rápido :)

3. Crear un Child Theme (o Tema Hijo)

Un método más complejo pero igual de eficaz. Consiste en crear un tema hijo, que modifica los estilos del tema padre. Básicamente vamos a realizar la misma tarea que con el método anterior: cargar una hoja de estilos propia justo después de la hoja de estilos del tema padre. Sobreescribimos y añadimos nuevas reglas sin tocar el tema original. Fantástico.

Sin embargo, para algunos usuarios, este método puede resultar algo tedioso. Necesitarás un editor de CSS (notepad puede servir, pero no es lo más recomendable, mejor sublime text), y acceso a tu FTP o empaquetar tu child theme e instalarlo via Apariencia > Temas.

Editar CSS con tema hijo WordPress

Sea cual sea la forma que decidas, aquí tienes más información sobre como crear un tema hijo en el codex de WordPress.

Este método es personalmente mi favorito, aunque es entendible que sólo se utilice cuando las modificaciones tienen una cierta entidad. Para una pequeña modificación, el método vía Editor CSS de JetPack es más sencillo y rápido.

Por otro lado, si no tienes problemas en crear themas hijos, te recomiendo que esta sea siempre tu primera opción. El motivo principal es que es escalable: si necesitas incluir alguna funcionalidad o template extra, lo puedes hacer en el fuctions.php de tu tema hijo (algunas pueden ser muy interesantes, sobre todas referidas al responsive o a incluir una web font en tu WordPress).

Con Jetpack no puedes modificar y añadir nuevas funciones. Solo es hojas de estilo. Y por otro lado, solo estás incluyendo una llamada más a un solo archivo CSS (style.css de tu child theme) mientras que para la primera opción, de partida ya estar cargando un plugin más la llamada al servidor del nuevo CSS. Pero lo dicho, ambas son muy buenas.

4. Editar directamente el style.css de tu Tema

Pasamos a la zona gris de la edición de CSS en WordPress. Editar directamente el CSS de tu tema (style.css) no es la solución más limpia. Tanto si es un tema premium como un tema gratuito, vas a perder dichos cambios cuando el tema se actualice.

Además, si no tienes conocimiento de CSS, ten mucho cuidado con las puntuaciones y los cierres de reglas. Dejarte una llave abierta, u olvidar un punto y coma puede hacer tu hoja de estilos ilegible para algunos navegadores.

Si aún así estás convencido de que este es tu método, veamos como podemos realizarlo directamente a través del panel de Administración de WordPress. Los pasos son:

1. Ir a Apariencia > Editor
2. Buscar el archivo style.css (comprobar que está seleccionado el tema actual)
3. Editar con sumo cuidado.

Editar el CSS de theme WordPress

Además de los inconvenientes citados anteriormente, este método no te dará acceso a todo el CSS en algunos temas. Un ejemplo claro: si el autor del tema ha decidido dividir los estilos en varios CSS, puede que alguno de ellos esté inaccesible desde dicho editor, al encontrarse dentro de una carpeta tipo library, assets o css.

Otros métodos y alternativas.

Existen otros métodos y alternativas: principalmente plugins que te permiten definir una hoja de estilos, o algún tema que trae consigo un campo para las modificaciones que queramos realizar. Pero suelen ser muy minoritarios.

Lo importante, es que decidas el método que decidas, realices una copia de aquellos archivos que puedas perder y uses la alternativa que más se adecue a tus conocimientos. Muévete por lo sencillo y lo que controles. Suerte! (cualquier duda me preguntas) Y tú, cuál es tu método favorito para editar CSS en WordPress?

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.