Ver nuestra web local en un teléfono u otro dispositivo
1. Buscar la dirección IP de nuestro ordenador.
– En PC: Centro de Redes>Conexión de red inalámbrica
– En Mac: ir a Aplicaciones>Utilidades>Utilidad de Red
2. En el WordPress, ir a Ajustes > Generales > Dirección de WordPress (URL) y Dirección del sitio (URL).
Substituir “localhost” por nuestra IP (dejando el :8888). Por ejemplo:
http://localhost:8888/verdi –> http://192.168.254.189:8888/verdi
3. En qualquier dispositivo (móvil, tablet o ordenador) en el que pongamos esta dirección vamos a ver nuestra web.
[...]Depurar webs para dispositivos móviles y tablets
Mediante emulación en el ordenador
Developer Tools para Chrome
- Abrir Google Chrome.
- Menú > Herramientas > Herramientas para desarrolladores
- Asegurarnos en Settings que esté activada la opción “Show ‘Emulation’ view in console drawer.”
- Apretar Esc para abrir la consola de DevTools.
- Seleccionar “Emulation” y escoger el dispositivo que queramos visualizar.
- Hacer click en “Emulate”.
- Refrescar la página (es importante hacer esto porque aunque veamos que la medida ha cambiado hasta que no refresquemos no visualizaremos la versión móvil, si la hay).
Plugins para menús móviles
Usamos en clase:
jQuery Responsive Select Menu
http://wordpress.org/plugins/jquery-responsive-select-menu/screenshots/
WP Responsive Menu
Taller de media query, jquery mobile & selectores de User Agent (para IDEP)
Trabajar en la misma hoja de estilos usando media querys:
En el pasado ya habíamos usado min-width y max-width:
/* si el ancho máximo es menor de 600 */
@media screen and (max-width: 600px) {
/* STYLES GO HERE */
}
Observemos la diferencia entre: min-width y min-device-width
/*iPad en portrait & landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad en landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
Mostrar post con custom fields de una manera diferente en WordPress
Podemos crear plantillas personalizadas para páginas estáticas basándonos en el archivo page.php
Podemos, por ejemplo, duplicar este archivo y darle un nombre como este: page_custom.php
Ahora, incluimos al principio del código de este nuevo archivo lo siguiente:
<?php
/*
Template Name: Mi pagina personalizada
*/
?>
El nombre del template es el que aparecerá después en el menú de administración.
Una vez creado el archivo personalizado, nos vamos a la administración de nuestro blog, y desde la opción de crear/editar una página, debería aparecernos la opción de “Plantilla de página” donde aparecerá el nombre de nuestro nuevo template. Lo seleccionamos y listo… nuestra página se basará en el diseño que hemos hecho.
[...]Listar «custom post»
Para poder listar pos mas fácilmente, cree un functions + content que han de integrar en vuestro template hijo.
Una vez incluido function.php dentro de la carpeta de vuestro tema hijo, podréis listar post de la siguiente manera:
[listar posts_per_page="5" cat="1" orderby="post_date"]
Los «parámetros» de este shortcode son los mismos que los que soporta
http://codex.wordpress.org/Class_Reference/WP_Query
UPDATE (Ejemplos de código)
[listar post_type=»pelicula» posts_per_page=»5″ cat=»2″]
[...]Tutorial en PDF para llevar WordPress de un ordenador a otro
A esta altura no debería hacernos falta, pero como hay gente a la que esto le está dando problemas he preparado un tutorial de como migrar wp en local
Child Theme
Escogeremos un tema y crearemos un «tema hijo»
Para que WordPress reconozca un tema como hijo, lo único que debemos hacer es:
1. Crear una carpeta con un nombre que decidamos en la ruta wp-content/themes, por ejemplo: child_twentytwelve
2. Dentro de la carpeta, creamos un fichero css denominado style.css
3. Editar el fichero style.css y añadir el siguiente código:
/*
Theme Name: Scoobysan
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Child Theme. Parent Theme twentyfourteen
Author: Victor Maciel
Author URI: bancodepruebas.de
Template: twentytwelve
Version: 0.1
*/
WordPress. Instalación en local con MAMP
WordPress en local con MAMP
Usaremos MAMP (un software que incluye en un solo paquete Apache, MySQL y PHP) para «simular» que estamos trabajando en un servidor, en nuestro propio ordenador.
Lo primero es descargar la última versión de MAMP desde: www.mamp.info/en/index.html.
Instalamos.
Cuando acabemos tendremos una carpeta llamada MAMP en la carpeta Aplicaciones y un widget para instalar en el Dashboard (doble clic) desde el que iniciar o detener el servidor que se ha instalado automáticamente. Debes iniciar MAMP para tener tu servidor local funcionando, y lo puedes comprobar pulsando en el botón “Página de Inicio” del widget o de la aplicación principal.
[...]