V
VeneHost
Gamma
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Cómo crear un tema de WordPress?
Hola amigos para hoy vamos aprender a como crear un tema de WordPress? Iniciemos la construcción de su tema, primero cree una subcarpeta en el directorio wp-content / themes en la carpeta de WordPress. A los efectos de este tutorial, vamos a llamar a la carpeta "tutorial_theme". El nombre de la carpeta debe corresponder al nombre del tema que desea crear. Para ello puede utilizar su favorito cliente FTP o el Administrador de archivos herramienta en su cPanel.
Antes de empezar a crear el tema, debe decidir cómo el diseño de su sitio web se verá así. En este tutorial vamos a crear un tema de WordPress que constan de una cabecera, barra lateral, área de contenido y un pie de página, como se muestra a continuación:
Para ello tendremos que crear los siguientes archivos en el directorio tutorial_theme:
header.php - Este archivo contendrá el código de la sección de encabezado del tema;
index.php - Este es el archivo principal para el tema. Contendrá el código de la Zona Principal y especificará en la que se incluyen los otros archivos;
sidebar.php - Este archivo contendrá la información sobre la barra lateral;
footer.php - Este archivo se encargará de su pie;
style.css - Este archivo se encargará de que el estilo de su nuevo tema;
Puede crear esos archivos de forma local con un simple editor de texto (como el Bloc de notas, por ejemplo) y subirlos a través de FTP o puede utilizar el Administrador de archivos herramienta en su cPanel para crear los archivos directamente en su cuenta de alojamiento.
Ahora echemos un vistazo más de cerca a cada archivo y lo que debe contener:
El archivo header.php
En este archivo se debe añadir el siguiente código:
PHP:
<Html>
<head>
<title> tema Tutorial </ title>
<link rel = href "stylesheet" = "<? php bloginfo ('stylesheet_url');?>">
</ head>
<body>
<div id = "envoltorio">
<div id = "header">
<h1> CABECERA </ h1>
</ div>Básicamente, esto es simple código HTML con una sola línea que contiene un código php y una función de WordPress estándar. En este archivo se puede especificar su meta tags, como el título de su página web, meta descripción y las palabras clave de su página.
Justo después del título de la línea añadimos
PHP:
<Link rel = href "stylesheet" = "<? Php bloginfo ('stylesheet_url');?>">dice WordPress para cargar el archivo style.css. Que se encargará de que el estilo de su sitio web.
Los
PHP:
<? Php bloginfo ('stylesheet_url'); ?>parte de la línea es una función de WordPress que realmente carga el archivo de hoja de estilos.
A continuación, hemos añadido el comienzo de un "div" con la envoltura de clase que será el contenedor principal del sitio web. Hemos establecido la clase para que lo que podemos modificarla a través del archivo style.css.
Después de que hemos añadido una sencilla CABECERA etiqueta envuelto en un "div" con clase "de cabecera", que será más adelante se especifica en el archivo de hoja de estilos.
El archivo index.php
PHP:
<? Php get_header (); ?>
<div id = "principal">
<div id = "contenido">
<h1> Area Principal </ h1>
<? php if (have_posts ()): while (have_posts ()):? the_post (); ?>
? <h1> <? php the_title (); ?> </ H1>
<h4> Enviado el <? php the_time ('F JS, Y')> </ h4>?
<p> <? php the_content (__ ('(más ...)')); ?> </ P>
<hr> <? php endwhile?; ? más:>
? <p> <? php _e ('. Lo sentimos, no hay puestos corresponde a sus criterios'); ?> </ P> <? Php endif; ?>
</ div>
<? php get_sidebar (); ?>
</ div>
<div id = "delimitador">
</ div>
<? php get_footer (); ?>El código de este archivo comienza con
PHP:
<? Php get_header (); ?>que incluirá el archivo header.php y el código en la página principal. Utiliza una función de WordPress interno para hacer esto. Vamos a explicar esto en detalle más adelante en este tutorial. Entonces hemos puesto un texto Área principal para indicar qué sección de su tema se muestra en esta área.
Las próximas líneas consisten en un código PHP y funciones de WordPress estándar. Este código comprueba si tiene mensajes en tu blog creados a través del área de administración de WordPress y los muestra.
A continuación, incluimos el archivo sidebar.php con esta línea
PHP:
<? Php get_sidebar (); ?>En este archivo puede mostrar su categoría de correos, archivos, etc.
Después de esta línea, insertamos un "div" vacío que separará la zona principal y la barra lateral del pie de página.
Por último, añadimos una última línea
PHP:
<? Php get_footer (); ?>que incluirá el archivo footer.php en su página.
El archivo sidebar.php
En el sidebar.php añadiremos el siguiente código:
PHP:
<Div id = "barra lateral">
<h2> <? php _e ('Categorías'); ?> </ H2>
<ul>
<wp_list_cats php ('sort_column = name & optioncount = 1 & jerárquica = 0'); ?>
</ ul>
? <h2> <? php _e ('Archivos'); ?> </ H2>
<ul>
<wp_get_archives php ('type = mensual'); ?>
</ ul>
</ div>En este archivo se utiliza funciones internas de WordPress para mostrar las Categorías y Archivos de mensajes. La función de WordPress los devuelve como elementos de la lista, por lo tanto, hemos envuelto las funciones reales en las listas sin ordenar (los <ul> tags).
El archivo footer.php
Usted debe agregar estas líneas al archivo footer.php:
PHP:
<Div id = "footer">
<h1> Creación </ h1>
</ div>
</ div>
</ body>
</ html>Con este código se añade un sencillo lable pie de página. En lugar de este código puede agregar enlaces, texto adicional, la información de derechos de autor para su tema y objetos adicionales.
El archivo style.css
Agregue las siguientes líneas al archivo style.css:
PHP:
body {text-align: center; }
#wrapper {display: block; frontera: 1px # a2a2a2 sólido; width: 90%; margen: auto 0px; }
#header {border: 2px # a2a2a2 sólido; }
#content {width: 75%; frontera: 2px # a2a2a2 sólido; flotador izquierdo; }
#sidebar {width: 23%; frontera: 2px # a2a2a2 sólido; float: right; }
#delimiter {clear: both; }
#footer {border: 2px # a2a2a2 sólido; }
.title {font-size: 11pt; font-family: Verdana; font-weight: bold; }Este archivo css simple ajusta las miradas básicas de su tema. Esas líneas marcan el fondo de la página y rodean las partes principales de su sitio con las fronteras para mayor comodidad.
En este punto de su sitio web debe tener este aspecto:
