• Save
Word Press
Upcoming SlideShare
Loading in...5
×
 

Word Press

on

  • 1,231 views

Word Press. Cómo armar tu plantilla en word Press

Word Press. Cómo armar tu plantilla en word Press

Statistics

Views

Total Views
1,231
Views on SlideShare
1,148
Embed Views
83

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 83

http://wclase.zobyhost.com 83

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Word Press Word Press Presentation Transcript

  • COMO CONVERTIR MI DISEÑO EN UNA PLANTILLA DE WORDPRESS
    LUIS PALOMINO
  • INGRESA EN LA CARPETA DE TEMAS SIGUIENDO LA RUTA INDICADA Y DUPLICA LA CARPETA DEL TEMA DEFAULT PARA NO DAÑAR LA ORIGINAL
  • LOS ARCHIVOS AMARILLOS SON LAS PARTES BÁSICAS DEL DISEÑO Y LAS MORADAS SON LAS QUE PERMITEN QUE SE VEAN LAS IMÁGENES.
    ABRE LAS AMARILLAS EN DREAMWEAVER
  • Es archivo INDEX obtiene usando get() los otros archivos para que formen parte de su estructura o diseño
  • INDEX. Es el archivo que se ve cuando ingresas a la web. Muestra una lista de los post publicados.
    SINGLE. Es el archivo que se ve cuando ingresas a ver un post.
    PAGE. Es el archivo que se ve cuando ingresas a una página del Wordpress. Se crean de manera independiente a los post
    404. Es el archivo que se ve cuando ingresas a un post o archivo que no existe o no está disponible.
  • HEADER
  • EL ARCHIVO INDEX INCORPORA AL ARCHIVO HEADER A TRAVÉS DEL CÓDIGO get_header();
  • EN EL ARCHIVO HEADER LA INFORMACIÓN SOMBREADA ES LA ESTRUCTURA DEL DISEÑO DEFAULT. NO NOS SIRVE, POR ESO LA BORRAMOS.
  • UNA VEZ BORRADO EL CÓDIGO DEL HEADER EL DISEÑO SE MOVERÁ A LA IZQUIERDA, ESO ES NORMAL
  • INDEX
  • AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO
  • AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO
  • DENTRO DEL ARCHIVO INDEX HAY CUATRO PARTES IMPORTANTES QUE PERMITEN CONSTRUIR EL ARTÍCULO O EL POST DEL WORDPRESS
    TITULO
    DEL ARTÍCULO
    FECHA Y AUTOR
    DEL ARTÍCULO
    CONTENIDO
    TEXTO DEL ARTÍCULO
    INDICA LA CATEGORÍA DONDE SE ENCUENTRA EL ARTÍCULO Y SI TIENE COMENTARIOS
    POST META
  • TITULO
    FECHA Y AUTOR
    CONTENIDO
    POST META
    ASÍ SE VEN EN EL ARTÍCULO
  • ASÍ SE VEN EN EL CÓDIGO
    FECHA Y AUTOR
    TITULO
    POST META
    CONTENIDO
  • UNA VEZ ACABADAS LAS PARTES DEL ARTÍCULO APARECEN 4 CURACTERÍSTICAS MÁS
    SI HAY MÁS ARTÍCULOS QUE MOSTRAR APARECEN LOS BOTONES ANTERIOR Y SIGUIENTE
    END WHILE
    CUANDO NO ENCUENTRA EL ARTÍCULO
    ELSE
    END IF
    CIERRE DEL CÓDIGO
    get_sidebar()
    get_footer()
    CARGA LOS ARCHIVOS SIDERBAR Y FOOTER
  • LA ZONA SOMBREDA DE AMARILLO ES LA QUE PERMITE QUE WORDPRESS FUNCIONE Y SE VEA.
    EL get_sidebar PERMITE QUE SE VEA EL LADO
  • FOOTER
  • SELECCIONA LAS ULTIMAS DOS LINEAS DEL FOOTER: </body></html> SON LAS ÚNICAS QUE NECESITAMOS. CÓPIALAS.
  • PEGA AQUÍ EN EL INDEX LAS LÍNEAS DEL FOOTER REMPLAZANDO LA LÍNEA DEL get_footer.
  • TRAE AHORA TU DISEÑO
  • LLEGÓ EL MOMENTO DE TRAER TU DISEÑO, ASEGURATE DE TENER TU HTML DE PRUEBA EL CSS QUE LO CONSTRUYE Y LA CARPETA DE IMAGES
  • COPIA LAS IMÁGENES EN LA CARPETA IMAGES Y COPIA TU ESTILO JUNTO A LOS OTROS ARCHIVOS
  • EN EL ARCHIVO INDEX CORTA EL TEXTO DE LA ESTRUCTURA DEL WORDPRESS Y SÓLO DEJA LO QUE SE VE EN ESTA IMAGEN
  • PEGA LO CORTADO EN OTRO ARCHIVO, NO LO PIERDAS POR QUE LO VAS A VOLVER A UTILIZAR
  • COPIA TODA LA INFORMACIÓN QUE ESTÁ DENTRO DEL BODY DE TU DISEÑO TU ARCHIVO PRUEBA.HTML
  • PÉGALA EN EL ARCHIVO INDEX.PHP DESPUÉS DEL get_header(); ?>
  • SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA
  • SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA
  • PEGA EN EL LUGAR DE DONDE SACASTE EL TEXTO QUE DEJASTE EL CÓDIGO DEL WORDPRESS
  • V
    AHORA COPIA LA LÍNEA QUE HACE LINK A TU ESTILO PERO AGRÉGALE EL TEXTO: <?phpbloginfo(‘stylesheet_directory’); ?>/ COMO SE VE ARRIBA
  • EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ
  • CSS DEL WORDPRESS
  • REALIZA LOS SIGUIENTES CAMBIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.
  • AHORA EL ARCHIVO SINGLE
  • DE MANERA SIMILAR AL INDEX APARECERÁ CON PROBLEMAS, ES POR ESO NECESARIO AGREGAR ALGUNOS PUNTOS.
  • DE MANERA SIMILAR AL INDEX RETIRA EL TEXTO DEL WORDPRESS, DEJA LA LINEA get_header(), RETIRA LAS LINEAS get_sidebar() y get_footer() Y ESCRIBE AL FINAL </body> y </html>
  • EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ
  • CSS DEL WORDPRESS
  • REALIZA LOS CAMBIOS NECESARIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.
  • REALIZA LOS CAMBIOS NECESARIOS DE MANERA SIMILAR PARA LOS DEMÁS ARCHIVOS DEL LA PLANTILLA