Cómo crear el tema de WordPress es una de las principales consultas en la búsqueda de Google. Crear un tema de WordPress puede ser simple si conoce HTML, CSS y JavaScript básicos. Sin embargo, si eres nuevo en WordPress, entonces este tutorial es para ti. Todo lo que tienes que hacer es seguir los pasos mencionados. Entonces, leamos esta guía y aprendamos cómo crear un tema de WordPress desde cero.
Requisitos
Primero y lo más importante que debe hacer es instalar WordPress. WordPress es conocido por su facilidad de instalación. Es un proceso simple y se puede hacer fácilmente siguiendo la Guía.
Cómo crear el tema de WordPress; Guía paso por paso
Para el tema de WordPress, todo se hará en el directorio wp_content solamente. Simplemente haga una nueva subcarpeta de tema en la carpeta WP_CONTENT → TEMSES. Supongamos que lo nombra “CustomTheme” . La segunda cosa es decidir el diseño del tema. Aquí, el tutorial muestra el diseño básico que consta de encabezado, área principal, pie de página, barra lateral . Básicamente, WordPress solo necesita 2 archivos, es decir, style.css e index.php. Pero, para este diseño, necesita 5 archivos , como sigue;
- Header.php - Contiene el código para la sección del encabezado del tema.
- Index.php - Contiene el código para el área principal y especificará dónde se incluirán los otros archivos. Este es el archivo principal del tema.
- Sidebar.php - Contiene la información sobre la barra lateral.
- Fuente.php - Maneja la sección de pies de página.
- style.css - Responsable del estilo de su tema.
- bootstrap.css - No se requiere código CSS separado; altamente receptivo.
- Bootstrap.js - Proporciona su propia JS para la barra de navegación o pestañas, etc. Bootstrap.js y bootstrap.css debe descargarse del paquete Bootstrap y copiarse en la carpeta Tema . Aquí están los pasos a seguir hasta el tema de configuración
Paso 1: Archivo Header.Php
Coloque el siguiente código en el archivo Header.php.
<html>
<head>
<title>Custom Theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<link href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="ttr_header" class="jumbotron">
<h1>HEADER</h1>
</div>
<div class="container">
Este archivo de encabezado.php contiene el código para la parte del encabezado en la que está vinculado el archivo JS y el estilo. Muestra el encabezado de la página.
Paso 2: archivo index.php
Coloque el siguiente código en el archivo principal index.php
<?php get_header(); ?>
<div id="ttr_main" class="row">
<div id="ttr_content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
El código anterior muestra el contenido principal de la publicación, la barra lateral y el pie de página.
Paso 3: archivo de barra lateral.php
Agregue el siguiente código en la barra lateral.php
<div id="ttr_sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h2 ><?php _e('Categories'); ?></h2>
<ul > <?php wp_list_cats('sort_column=namonthly'); ?> </ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>
En el código anterior, las funciones internas de WordPress se llaman para mostrar diferentes categorías, archivos de publicaciones.
Paso 4: archivo de footer.php
Agregue las líneas de código a continuación al archivo Footer.php:
<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
Paso 5: archivo styles.css
Agregue las siguientes líneas al archivo style.css
body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
Después de seguir todos los pasos anteriores, tendrá un tema básico de WordPress de trabajo. Puede modificarlo aún más para que sea más hermoso y adecuado para sus requisitos.
Conclusión
En este tutorial hemos explicado cómo crear un tema de WordPress en pasos simples y sencillos. Después de leer y seguir los pasos, crear un tema de WordPress no es una tarea más difícil ahora. Pero, obviamente, este tutorial se adhiere a una configuración muy básica y para mejorar la parte superior, tendrá que aprender más sobre HTML, CSS, JS y PHP.