Documente Academic
Documente Profesional
Documente Cultură
¿Y ahora qué?
Ahora debemos saber para que sirve cada archivo de una plantilla básica:
Esas son las más básicas pero suelen haber otras más como:
Una vez maquetado veremos que WordPress por defecto nos muestra una lista de post recientes y eso
para un sitio web no sirve de mucho debemos crear una plantilla de página que sirva como homepage o
página de inicio, para ello duplicamos page.php y le ponemos el nombre de homepage.php (o el nombre
que se nos ocurra) y luego al inicio escribimos
Para que sea el homepage vamos a settings/reading y fijamos como primera página la que hemos creado
Luego podemos ir defieniendo los menus pero eso lo dejo para una segunda parte
Cómo crear una plantilla de página
personalizada
Crear un plantilla de página personalizada no podría ser más sencillo.
Crear un documento php en blanco, a continuación, agregue el siguiente
código:
< ?php
/*
Template Name: nombre plantilla
*/
?>
Para que el archivo es reconocidos como una plantilla de página
personalizada, debes comenzar con la cadena “Template Name:” en un
comentario. Después de que usted puede agregar otra información,
como:
<?php
/*
* Template Name: Mi pagina personalizada
* Description: Plantilla de pagina personalizado 1.
*/
?>
// aqui va el resto del codigo....
</div><!--/.container -->
</div><!--/.main-content -->
Con esto estamos también diciendo que para que un tema de WordPress sea
reconocido por WordPress deberá incluir sí o sí estos dos archivos index.php y
style.css. Con que falte la hoja de estilos o el archivo index.php WordPress no
reconocerá la carpeta mitema como un tema de WordPress.
Aquí vamos a desarrollar un tema más completo que nos sirva de base para
otros proyectos. Y raramente crearemos un tema de WordPress que no contenga
una cabecera, un footer y una barra lateral, por no decir un buscador interno.
Tampoco vamos aquí a desarrollar un tema complejo con Custom Post Types y
funciones avanzadas, pero sí que queremos tener lo necesario para crear un tema
decente con el que poder desarrollar proyectos más complejos.
Así, vamos a desarrollar un tema con la mayoría de archivos y carpetas que utilizo
para este tema de CreativaSfera, y serán los siguientes:
1 /*
5 Author: Tu nombre
7 Version: 1.0
8 */
Fíjate que este fragmento de texto está comentado con /* ... */. Todos los datos
que ponemos aquí van a aparecer junto al tema en Apariencia > Temas. En el caso
del tema de CreativaSfera, estos son los datos que tengo:
1 /*
7 Version: 4.0
8 */
03
04 <head>
07
10
13
15
17
18 </head>
19 <body>
20 <div class="wrapper">
21 <header>
23 <hr>
25 </header>
Lo primero que hemos hecho ha sido declarar el doctype, en este caso para HTML5.
Seguidamente hemos abierto la etiqueta html indicando que seleccione los atributos
de idioma de la instalación de WordPress. Dentro de head hemos usado bloginfo(
'charset' ); para que seleccione la codificación predeterminada de nuestra
instalación de WordPress. La función wp_title() selecciona y muestra el título
especificado en Ajustes > General del panel de administración de WordPress.
Bien, para que esto funcione, primero deberemos añadir al archivo functions.php
este código:
01 <?php
03
04 add_theme_support( 'nav-menus' );
05
06 if ( function_exists( 'register_nav_menus' ) ) {
07 register_nav_menus(
08 array(
10 )
11 );
12 }
13 ?>
Este código lo que hace es crear un menú llamado “Main” que nos aparecerá en el
panel de administración de WordPress en Apariencia > Menús. Lo que esté código
dice es que si existe una función llamada register_nav_menus, que entonces cree un
nuevo menú de navegación llamado Main. Hemos añadido la función de WordPRess
add_theme_support() para indicar que en este tema queremos poder crear menús
dinámicos.
01 <?php
02
03 // Main Sidebar
04 if(function_exists('register_sidebar'))
05 register_sidebar(array(
11 ));
12
13 ?>
Al hacer esto, si vamos a Apariencia > Widgets, veremos que nos aparece una
nueva zona de widgets llamada Main Sidebar. Si nunca has creado una zona de
widgets, te recomiendo este artículo para aprender a crear una zona lista para
WordPress.
El archivo sidebar.php
Una vez creada la zona lista para widgets, vamos a tener que llamarla dentro del
archivo sidebar.php. Creamos este archivo y escribimos:
1 <section id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') ||
3
!dynamic_sidebar('Main Sidebar') ) : ?>
5
6
7 </section>
He utilizado un id teniendo en cuenta que en este tema sólo va a existir una barra
lateral, pero si quieres crear más, quizás prefieras crear una clase. Con esto ya
tenemos creada la barra lateral lista para widgets.
El archivo footer.php
01 <footer>
03
04 </footer>
05
07
09 </body>
10 </html>
Fíjate que wrapper engloba tanto el header como el footer, si queremos un header o
un footer que se extienda toda la pantalla como es en el tema de CreativaSfera,
deberemos mover las posiciones de los div que abren y cierran wrapper.
Aquí aparece la función wp_footer, que al igual que pasaba con wp_header, no
debemos olvidarla. Estas funciones son lo que se llaman hooks y son necesarias para
que funcionen los plugins que instalemos.
El archivo index.php
01 <?php get_header(); ?>
02
03
04 <section id="main">
05
06
07
10 <?php get_sidebar()?>
11
12
get_sidebar();
get_footer();
Deben ir siempre entre las etiquetas , o en otro caso no funcionará. Para que lo
entiendas, lo que hace get_header() es insertar los contenidos del archivo
header.php en el lugar donde se encuentra esta función. Lo mismo pasa con
get_sidebar() para los contenidos de sidebar.php y get_footer() para los
contenidos de footer.php. Es lo que comentaba de que WordPress funciona por
módulos.
02
<h2><a href="<?php the_permalink(); ?>"><?php
03
the_title(); ?></a></h2>
06
07
Lo que aquí le estamos diciendo a WordPress es que mire si hay alguna entrada
disponible, esto lo hacemos con if(have_posts()). Fíjate en el if, significa que
sólo ejecute el resto si esta condición se cumple, esto es, que exista algún post. Lo
siguiente que le decimos es que mientras haya entradas, esto es,
while(have_posts()), que seleccione cada uno de los posts: the_post().
Así pues, ahora mostraremos el título de la entrada con una enlace a la misma:
Si queremos que debajo del título se vean datos como la fecha de publicación, la
categoría, el autor, etc., se lo tendremos que especificar a continuación:
2 //Habilitar thumbnails
3 add_theme_support('post-thumbnails');
5 ?>
Con este código hemos habilitado los thumbnials o imágenes destacadas de nuestras
entradas y hemos establecido un tamaño para las mismas de 150 por 150 píxeles.
Una vez hecho esto, modificaremos nuestro loop como sigue:
02
05 <div class="thumbnail">
06 <?php
07 if ( has_post_thumbnail() ) {
08 the_post_thumbnail();
09 }
10 ?>
11 </div>
1 <?php
2 if ( has_post_thumbnail() ) {
3 the_post_thumbnail();
4 }
5 ?>
Con esto ya hemos creado nuestra página principal, con su cabecera, zona de
contenidos con las últimas entradas, barra lateral y pie de página. Para añadir una
paginación de las entradas, te recomiendo este post sobre cómo crear la paginación
de las entradas en WordPress. Aunque esté en inglés, como es sólo código es fácil
de entender. En cualquier caso, si descargas los archivos de este tema, viene ya
incluida la paginación tal y como la muestra este post y que utilizo aquí en eSandra
(no hace falta reinventar la rueda).
02
03 <section id="main">
04 <h2>Resultados de la búsqueda</h2>
06
09 <div class="thumbnail">
10 <?php
11 if ( has_post_thumbnail() ) {
12 the_post_thumbnail();
13 }
14 ?>
15 </div>
17
20 pagination($additional_loop->max_num_pages);
21 } ?>
25
27
28 <?php get_sidebar()?>
29
Fíjate que se parece mucho a index.php. Esta página es la que va a mostrar los
resultados de una búsqueda en cuestión. Así, vamos a necesitar crear un buscador.
Vamos al archivo sidebar.php y justo antes de la función que habilita la zona de
widgets en el sidebar, incluimos este código:
4 </form>
Con esto tenemos un campo de búsqueda en nuestra barra lateral. Para que se
visualice como queremos, simplemente hará falta crear el código CSS necesario.
El archivo single.php
01 <?php get_header(); ?>
02
03 <section id="main">
04 <article id="single">
06
09
10 <div class="post">
11
14 </div>
15
16
18
20
22
24 <?php get_sidebar()?>
25
Este código es el mismo que utilizo en CreativaSfera, con lo que es fácil de entender
con todo lo que hemos explicado ya. Faltaría añadir el poder poner comentarios en
cadena y las entradas relacionadas. En el loop utilizamos the_excerpt() para
mostrar el extracto de la entrada, mientras que aquí utilizamos la función
the_content() para que se muestre el contenido de la entrada.
Para mostrar las entradas relacionadas, añadiremos este código justo después de
mostrar el contenidos de la entrada:
01 <?php
02 $tags = wp_get_post_tags($post->ID);
03 if ($tags) {
04 $tag_ids = array();
06 $args=array(
10 'caller_get_posts'=>1
11 );
13 if( $my_query->have_posts() ) {
15 while ($my_query->have_posts()) {
16 $my_query->the_post();
17 ?>
19 <?php
20 }
21 echo '</ul>';
22 }
23 wp_reset_query();
24 }
25 ?>
Explicar este código excede el abasto de este post, simplemente decir que muestra
las entradas relacionadas en base a las etiquetas de las entradas.
En una entrada va a ser necesario que podamos comentar y ver los comentarios de
los otros.
2 function enable_threaded_comments(){
4 wp_enqueue_script('comment-reply');
5 }
6 }
7 add_action('get_header', 'enable_threaded_comments');
3 </div>
01 .commentlist li {
03 }
04
05
06 .comment-body {
07 padding: 15px;
08 }
09
10 .comment-author {
11 margin-top: 5px;
12 }
13
14 .reply, .commentmetadata {
15 font-size: 0.9em;
16 }
17
18
21 border-radius: 4px;
22 }
23
24 .depth-1, .depth-3 {
25 background-color: #fafafa;
26 }
27
28 .depth-2, .depth-4 {
29 background-color: #fff;
30 }
31
32 .comment-author-eSandra {
35 }
36
37 .depth-1 {
38 margin: 20px 0;
39 }
40 /* Respuesta a comentarios*/
41
42
43 .depth-2 {
44 margin:2% 5% !important;
45 }
46
47 .depth-3 {
48 margin: 2% 7% !important;
49 }
50
51
52 .depth-4 {
54 }0
55 1
56 +
58 border-radius: 4px;
59 border:2px solid #ccc;
60 }
1 <?php
3 ?>
<h2>Etiqueta &amp;amp;#8216;<?php
04
single_tag_title(); ?>&amp;amp;#8217;</h2>
14 <?php } ?>