Creació d’un theme en wordpress (II)

Posted by

En aquest apartat fem una ullada al codi dels arxius imprescindibles per a la creació d’una plantilla. Encara és molt d’hora perquè aquesta es mostri de forma sòlida, però és un començament.

style.css

L’arxiu style.css conte les instruccions CSS que modifiquen el document HTML que mostra el servidor a l’usuari. En aquest sentit no hi ha cap novetat, però en el cas de wordpress, cal que inclogui un comentari a les primeres línies del document que permeten identificar el nom, la descripció i diferents detalls sobre el Theme. Sense aquestes línies, no veuríem el nom i els detalls del Theme a l’apartat aparença de l’administrador de WordPress. A continuació una mostra d’aquesta capçalera.

/*
Theme Name: Codify Theme
Theme URI: https://blocs.xtec.cat/codify/
Author: @guillemrigol
Author URI: https://blocs.xtec.cat/codify/
Description: A simple framework for a theme development
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codify
Tags: framework
*/

index.php

00. <?php /* Template Name: Codify Theme */ ?>
Aquesta línia identifica el template del theme amb un nom.
 
01. <!DOCTYPE html>
02. <html <?php language_attributes(); ?>>
A la fila 02. en verd es pot llegir la instrucció PHP que després imprimirà l'atribut que identifica la llengua en que s'escriu la pàgina. Per exemple: lang="ca".
 
03. <head>
04. <title><?php bloginfo( 'name' ); ?></title>
La instrucció PHP bloginfo(); de la línia 04. permet cridar diferents atributs del blog. En aquest cas, el nom o títol del weblog, que es controla des de les opcions generals de wordpress. Aquesta instrucció també pot cridar la descripció, el grup de caràcters , fins i tot, el directori de l'style.css, com es pot veure a les línies 05., 07. 13. i 15.
 
05. <meta charset="<?php bloginfo( 'charset' ); ?>"/>
06. <meta name="viewport" content="width=device-width, initial-scale=1"/>
07. <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"/>
08. <?php wp_head(); ?>
La funció no admet paràmetres però serveix per inserir estils, scripts i etiquetes necessàries pel funcionament de diferents plugins bàsics de WordPress. Cal situar-lo just abans de tancar l'etiqueta <head>.
 
09. </head>
10. <body>
11. <div id="wrapp">
12. <header>
13. <h1><?php bloginfo( 'name' ); ?></h1>
14. <h2><?php bloginfo( 'description' ); ?></h2>
15. <nav>
16. <?php wp_nav_menu(); ?>
La funció admet arguments i serveix per inserir el menu de navegació.
 
17. </nav>
18. </header>
19. <section>
20. <article>
21. </article>
22. </section>
23. <footer>
24. <?php wp_footer();?>
La funció no admet paràmetres però insereix referències Javascript necessàries pel funcionament de diferents plugins bàsics pel perfil de WordPress. Cal situar-lo just abans de tancar l'etiqueta <body>.
 
25. </footer>
26. </div>
27. </body>
28. </html>