03. Crear una Plantilla en Wordpress

03.- Crear una Plantilla en WordPress [Plantilla en bootstrap]

03. Crear%2Buna%2BPlantilla%2Ben%2BWordpress

INTRODUCCIÓN

En este tutorial vamos a descargar un html y ese html lo vamos a convertir en una plantilla de wordpress.

PROCEDIMIENTOS

1.- Descargamos dopetrope.zip desde aqui

2.- Copiamos dopetrope en temapn (la carpeta donde creamos nuestra plantilla).

3.- Extraemos en contenido de /assets/css/main.css en style.css

4.- Reparamos los paths de style.css (Buscamos todo lo que diga url)
Sustituimos
    “font-awesome.min.css” por “assets/css/font-awesome.min.css”
    “images/” por “assets/css/images/”
    “../../images/pic01.jpg” por “images/pic01.jpg”
    “bg01.png” por “bg.png”

    “bg02.png” por “bg.png”

5.- Copiamos el contenido de index.html y lo pegamos en index.php y borramos index.html

6.- En el header.php colocamos esto

<html <?php language_attributes(); ?>>
    <head>
        <title><?php echo bloginfo("name");// Nos da el nombre del blog ?></title>
        <meta charset="<?php bloginfo("charset");//Nos da el charset del blog ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="<?php echo get_template_directory_uri()."/style.css"; ?>">
    </head>

7.- Creamos el archivo header.php y footer.php donde colocaremos el header y footer del index respectivamente.

8.- En el index cologar:

<?php get_header(); ?>

y

<?php get_footer(); ?>

9.- Colocar en footer.php

<script src="<?php echo get_template_directory_uri() ?>/assets/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/jquery.dropotron.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/browser.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/breakpoints.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/util.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/assets/js/main.js"></script>

En el siguiente tutorial arreglaremos la imagenes que nos faltaron y agregaremos trabajaremos con el archivo functions.php y con las funciones wp_head y wp_footer

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)