WordPress: definir una plantilla diferente por categoría para leer posts (single.php)

WordPress: definir una plantilla diferente por categoría para leer posts (single.php)

Fuente: https://desarrollowp.com/blog/tutoriales/como-definir-una-plantilla-diferente-por-categoria-para-el-detalle-de-los-posts/

… cargará si encuentra un archivo single-nombredelacategoria.php (buscaremos por el slug de la categoría). En caso contrario devolverá single.php. Pondremos en nuestro functions.php:

function custom_single_template($the_template) {
foreach ( (array) get_the_category() as $cat ) {
if ( locate_template("single-{$cat->slug}.php") ) {
return locate_template("single-{$cat->slug}.php");
}
}
return $the_template;
}
add_filter( 'single_template', 'custom_single_template');

leer artículo completo en la fuente: desarrollowp.com

Anuncios

#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.

Duplica la plantilla de Tu Prestashop 1.6 by @Javier_V_P

fuente: http://javier-valero.es/2014/09/duplica-la-plantilla-de-tu-prestashop-1-6/

Cuando desarrolles y diseñes una tienda Prestashop, debes de tener en cuenta que una buena práctica a seguir a la hora de construir tu tienda online es duplicar la plantilla por defecto y renómbrala con el nombre que desees, puedes utilizar el nombre de tu marca por ejemplo.

Si haces esto, te aseguraras de no perder cambios en tu plantilla cuando actualices tu Prestashop.

A partir de la versión 1.6.0.8 aprox. Prestashop cambia el modo con el que se crea una plantilla, digo esto porque en anteriores versiones bastaba con que duplicases la carpeta re nombraras y después desde preferencias a Temas podías ver la carpeta que habías duplicado, en la versión 1.5 se podía añadir un tema nuevo, desde el mismo modo en como la crearemos en este tutorial pero en la versión más reciente de Prestashop a fecha de este Post el modus operandis es diferente.

¿Por qué?

Pues si ahora duplicas la carpeta no la veras en temas, solo podrás ver esta cuando la crees desde el back-office, no me preguntéis porque, pero es así.

EL modo de crearla desde el Back es muy sencillo te describo los pasos a seguir:

  1. Dirígete a Preferencias a Temas
  2. Haz clic en Añadir tema
  3. Haz clic en CREE UNA NUEVA PLANTILLA

Al pulsar en este botón, veras varios campos de formulario, sigue estos pasos, Pero recuerda que debes de poner el nombre que tu desees a tu plantilla.

  1. Pon un nombre
  2. Busca una captura de tu plantilla normalmente se encuentra en el theme default-bootstrap con el nombre de preview.jpg (Si ya tienes un diseño de tu plantilla te aconsejo que modifiques y pongas captura personalizada)
  3. Selecciona si deseas columna izquierda, derecha o las dos.
  4. Selecciona los productos que se mostraran por página.
  5. Escribe un directorio para tu plantilla te recomiendo que pongas el mismo o nombre que pusiste al principio.
  6. Ahora elige la plantilla default-bootstrap.
  7. Selecciona  modo Responsivo en Si
  8. Listo nuestra plantilla se duplico!!

Ahora el siguiente paso es dirigirse al back de tu tienda y elegir esta nueva plantilla e instalarla, pero OJO cuando pulses en instalar este tema veras que el proceso de instalación te preguntara que módulos deseas instalar y te informara de los que se deshabilitan, mira esta parte bien, si estas conforme con ello se instalara.

Ya tenemos lista nuestra plantilla para ser utilizada en nuestro proyecto y nos aseguramos de que aquellos cambios que hagamos no se pierdan.

Espero que te haya servido de utilidad este post, en siguientes post veras como hacer cambios en la plantilla que has duplicado, trucos básicos  que te servirá de ayuda para manejar tu plantilla.