WordPress
Eric Jorge Seguí Parejo
Dissenyar un template per a WordPress pareix més difícil del que realment és. Si eres desenvolupador front-end i et mous com peix en l’aigua amb el css, et resultarà prou fàcil.
No soc desenvolupador ni dissenyador, la meua especialitat és el màrqueting, i el motiu pel qual vaig aprendre a desenvolupar un theme per a WordPress va ser optimitzar la web a nivell de velocitat.
Fitxers necessaris
Abans de res, cal crear una carpeta a la qual posarem el nom del nostre tema. Dins d’esta, crearem una sèrie de fitxers en blanc que seran:
- functions.php: ací es recullen totes les funcions del nostre tema que interactuaran amb el nostre panell d’administració
- sidebar.php: el sidebar està orientat als plugins del nostre tema
- header.php: este fitxer serà la capçalera que s’inserirà en totes les pàgines. És on es carregaran tots els estils i javascripts
- index.php: és la pàgina principal del nostre tema, és a dir, la homepage.
- footer.php: és el fitxer que es carregarà al final de cadascuna de les pàgines de la nostra web.
- single.php: este fitxer és l’encarregat de mostrar les pàgines dels posts individuals.
- page.php: este fitxer s’encarrega de mostrar les pàgines del nostre WordPress.
- style.css: este fitxer s’encarrega de carregar els css del nostre WordPress
Una vegada tinguem tots estos arxius, cal introduir una capçalera en tots els nostres arxius completant les dades. Vos deixe un exemple de capçalera que podeu copiar i apegar al començament de tots els fitxers:
/*
Theme Name: Aquí el nombre de vuestro tema
Author: Aquí vuestro nombre de autor
Author URI: vuestra url con info del tema
Description: descripción del tema
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/Després d’açò, si pugem la carpeta al nostre directori de temes de /wp-content/themes, podrem visualitzar-la dins del nostre activador de temes. En el meu cas, vaig anomenar el tema theme-wp:
Encara que els fitxers mencionats dalt són els bàsics, per a este tutorial afegiré 2 fulls d’estils més:
- blog.css
- page.css
Estos fulls d’estil els usarem per a una càrrega selectiva de fulls d’estil, en què usarem el css que més ens interesse en funció del tipus de pàgina, per a limitar la quantitat de codi carregat.
functions.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
// This function enqueues the Normalize.css for use.
//The first parameter is a name for the stylesheet, the second is the URL.
//Here we use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles',
"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
// Creación de 'sidebar' para insertar widgets
function add_widget_Support() {
//Sidebar lateral derecho
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
//Sidebar para footer
register_sidebar( array(
'name' => 'Footer 1',
'id' => 'footer-1',
'before_widget' => '<div class="footer_w1">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
//Sidebar para footer
register_sidebar( array(
'name' => 'Footer 2',
'id' => 'footer-2',
'before_widget' => '<div class="footer_w2">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
//Sidebar para footer
register_sidebar( array(
'name' => 'Footer 3',
'id' => 'footer-3',
'before_widget' => '<div class="footer_w3">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook para iniciar el widget y ejecutar nuestra función
add_action( 'widgets_init', 'add_Widget_Support' );
// Crear menús de navegación
function add_Main_Nav() {
// Main menú
register_nav_menu('header-menu',__( 'Header Menu' ));
// Footer menú
register_nav_menu('footer-menu',__( 'Footer Menu' ));
}
// Hook para iniciar el menú y ejecutar nuestra función
add_action( 'init', 'add_Main_Nav' );
// thumbnails de las imágenes y tamaños
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );
// especificación del tamaño de los thumbnails
set_post_thumbnail_size(300, 200);
?>sidebar.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>header.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title>
<?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?>
</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<?php
if( is_single()):?>
<link rel="stylesheet" href="
<?php echo esc_url( home_url() ); ?>/wp-content/themes/theme-wp/blog.css">
<?php ;
else:?>
<link rel="stylesheet" href="
<?php echo esc_url( home_url() ); ?>/wp-content/themes/theme-wp/pages.css">
<?php ;
endif;
?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<div class="cont_head">
<span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo('name'); ?>
</a>
</span>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>
</header>index.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div><?php the_post_thumbnail('medium');?></div>
<i><?php the_author(); ?></i>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>footer.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<div class="widget-footer">
<div class="container">
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<?php dynamic_sidebar( 'footer-1' ); ?>
<?php endif; ?>
<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
<?php dynamic_sidebar( 'footer-2' ); ?>
<?php endif; ?>
<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
<?php dynamic_sidebar( 'footer-3' ); ?>
<?php endif; ?>
</div>
</div>
<footer>
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>single.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h1><?php the_title(); ?></h1>
<?php the_post_thumbnail('medium')?>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>page.php
<?php /*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
?>
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>style.css
En el nostre full de disseny, posarem alguns css bàsics per a poder visualitzar alguna cosa
/*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/*relleno interior de los bloques*/
* {
box-sizing: border-box;
margin:0px;
padding:0px;
}
/*Background*/
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
/*****************************************************************/
/*****************************CABECERA****************************/
/*****************************************************************/
/*centrar header*/
.my-logo {
vertical-align: middle;
text-align: center; /* requerido para alineación horizontal */
background-color: #333;
}
.cont_head span{
float:right;
height: 48px;
padding: 5px 20px 5px 20px;
font-size:30px;
background-color: #4CAF50;
}
.cont_head span a{
color:white;
}
/*****************************************************************/
/*******************************MENU******************************/
/*****************************************************************/
.menu {
overflow: hidden;
background-color: #333;
display: flex;
list-style:none;
}
.menu li {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-right: 1px solid white;
}
.menu li:hover {
background-color: #4CAF50;
}
.menu li:hover a {
color: white;
}
.menu li a {
color: #f2f2f2;
}
.current-menu-item {
background-color: #4CAF50;
color: white;
}
.sub-menu{
display:none;
position: absolute;
left: 0px;
margin-top: 14px;
width: 200px;
background-color: #333;
}
.sub-menu li{
width:100%;
}
.menu li:hover .sub-menu{
display:block;
}
@media all and (max-width: 500px) {
header, .menu{
flex-wrap: wrap;
}
.cont_head span{
float: none;
}
.menu li {
flex-basis: 100%;
}
}
/*****************************************************************/
/*****************************END MENU****************************/
/*****************************************************************/
/*****************************************************************/
/***************************END CABECERA**************************/
/*****************************************************************/
/*****************************************************************/
/*****************************CONTENIDO***************************/
/*****************************************************************/
/*****************************************************************/
/******************************TITULOS****************************/
/*****************************************************************/
h1{
font-size: 65px;
line-height: 80px;
text-align: center;
}
h1, h2, h3{
font-weight: bold;
margin: auto;
}
h2, h2 a{
font-size: 55px;
line-height: 46px;
text-align: center;
}
h3, h4, h5, h6{
text-align: left;
}
h3{
font-size: 30px;
line-height: 29px;
}
h4{ font-size: 25px;
}
h5{ font-size: 20px;
}
h6{ font-size: 15px;
}
/*****************************************************************/
/***************************END TITULOS***************************/
/*****************************************************************/
.content-area{
display: flex;
padding: 0 5% 0 5%;
margin-bottom: 30px;
}
.article-loop{
flex-wrap: wrap;
flex-basis: 33%;
background-color: #e5e5e5;
}
.article-loop h2{
color: #4CAF50;
background-color: #333;
margin-bottom: 10px;
padding: 20px 0 20px 0;
}
.article-loop h2 a{
color: #4CAF50;
text-decoration: none;
line-height: 55px;
}
.article-loop:hover h2 a{
color: white;
text-decoration: none;
}
.article-loop p{
margin-top: 10px;
}
img.attachment-medium.size-medium.wp-post-image{
width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
@media all and (max-width: 500px) {
.content-area{
flex-wrap: wrap;
flex-basis: 100%;
}
.article-loop{
flex-basis: 100%;
}
}
/*****************************************************************/
/***************************END CONTENIDO*************************/
/*****************************************************************/
/*****************************************************************/
/****************************PRE FOOTER***************************/
/*****************************************************************/
.widget-footer{
padding-bottom: 60px;
padding-top: 45px;
background-color:#2B315E;
color: #fff;
padding-left: 20%;
padding-right: 20%;
}
.widget-footer .container{
margin: 0 auto;
display: flex;
}
.widget-footer .container div{
flex-wrap: wrap;
margin: auto;
}
.container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
@media all and (max-width: 1200px) {
.widget-footer{
padding-left: 10%;
padding-right: 10%;
}
}
@media all and (max-width: 730px) {
.widget-footer{
padding-left: 0;
padding-right: 0;
}
}
@media all and (max-width: 683px) {
.widget-footer .container div{
flex-basis: 100%;
}
.widget-footer .container{
flex-wrap: wrap;
padding: 0 25% 0 25%;
}
}
/*****************************************************************/
/**************************END PRE FOOTER*************************/
/*****************************************************************/
/*****************************************************************/
/******************************FOOTER*****************************/
/*****************************************************************/
footer {
width: 100%;
padding-left: 1%;
background-color: #333;
vertical-align: middle;
text-align: center; /* requerido para alineación horizontal */
min-height:40px;
}
footer div{
display: inline-block;
margin: 30px 0 30px 0;
}
@media all and (max-width: 683px) {
footer .menu{
flex-wrap: wrap;
}
footer .menu li {
flex-basis: 100%;
}
}
/*****************************************************************/
/****************************END FOOTER***************************/
/*****************************************************************/blog.css
/*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
.content-thin {
width: 70%;
}
.primary-sidebar {
width: 25%;
padding: 1%;
vertical-align: top;
background-color: #ececec;
flex-basis: 35%;
padding: 0 250px 0 30px;
}
.article-loop {
width: 45%;
text-align: left;
margin: 5px;
padding: 10px;
}
.wrap{
display: flex;
flex-wrap: wrap;
}
.content-area {
flex-basis: 65%;
padding: 0 30px 0 250px;
}
.primary-sidebar h3{
margin: 20px 0 20px 0;
}
.primary-sidebar .menu li{
float:none;
}
.primary-sidebar .menu li a{
text-decoration: none;
}
.primary-sidebar .menu {
display: block;
}
#searchsubmit{
padding: 5px 20px;
background-color: #4CAF50;
border: none;
margin: 10px 0 0 0;
width: 100%;
color: white;
font-weight: bold
}
#searchsubmit:hover{
background-color: #f6933e;
color: black;
}
article p{
margin:30px 0;
font-size: 20px;
line-height: 30px;
}
article li{
margin-left: 20px;
font-size: 17px;
line-height: 40px;
}
article img{
margin:30px 0;
}
article ul{
padding-left: 50px;
list-style: square;
margin: 25px 0;
}
article h1{
margin: 20px 0 20px 0;
}
article a{
color: #4caf50;
}
.wp-block-code, .wp-block-preformatted{
background-color: black;
color: green;
padding: 20px 40px 20px 80px;
font-weight: bold;
font-size: 14px;
border: solid 3px green;
margin: 30px 0;
width: 950px;
}
iframe{
width: 100%;
}page.css
/*
Theme Name: theme-wp
Author: Queseo
Author URI: http://queseo.es/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
.content-thin {
width: 100%;
}
.content-area{
width: 100%;
}
.article-loop {
width: 32%;
text-align: left;
margin: 5px;
padding: 10px;
}Explicació del funcionament dels hooks i les funcions
Veure tots els codis així pot resultar un poc confús. El codi anterior està compost per html, css i php. Per mitjà del codi en php utilitzem els hooks i les funcions per a poder agafar la informació de la nostra base de dades i plasmar-la en el nostre front-end.
Bàsics
A continuació et mostraré els hooks i les funcions que he utilitzat en el codi anterior amb una breu explicació. Per a més ajuda sobre estos, et recomane que visites la pàgina de referència de WordPress per a desenvolupadors :
- language_attributes(): inserix l’idioma.
- bloginfo(‘name’): inserix el nom del blog.
- is_front_page(): comprova si la pàgina és una pàgina o un post.
- bloginfo(‘description’): inserix la descripció del blog.
- wp_title(»): mostra el títol de la pàgina per a totes les àrees del blog.
- bloginfo( ‘charset’ ): inserix els meta charset.
- bloginfo(‘stylesheet_url’): inserix el full d’estils per defecte.
- is_single(): ens diu si és una pàgina carregada amb single.php.
- esc_url( home_url() ): esc_url comprova i neteja la url, mentre que home_url retorna la url de la web actual.
- wp_head(): escriu scripts o dades en l’etiqueta head.
- body_class(): mostra la classe per a l’element body.
- wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ) ): amb wp_nav_menu mostrem el menú de navegació, mentre que amb
array( ‘theme_location’ => ‘header-menu’ ) indiquem el menú que volem usar, que es troba declarat dins del nostre functions.php. - get_header(): carrega el header.php.
- have_posts(): fa una consulta a WordPress per a comprovar si hi ha posts.
- the_post(): itera els posts que es mostren dins del bucle.
- the_permalink(): mostra l’enllaç permanent per a la pàgina actual.
- the_title_attribute(): mostra el títol actual. Similar a la funció the_title().
- the_title(): mostra el títol actual.
- the_post_thumbnail(‘medium’): mostra la imatge destacada de la pàgina o post amb una grandària mitjana (medium). També hi ha altres grandàries com thumbnail, large, full, etc.
- the_author(): mostra l’autor.
- the_excerpt(): mostra l’extracte del post.
- get_footer(): carrega el footer.php.
- the_content(): mostra el contingut del post.
- is_active_sidebar( ‘sidebar’ ): determina si el sidebar està en ús, és a dir, comprova si hi ha widgets en el sidebar.
- dynamic_sidebar( ‘sidebar’ ): mostra el sidebar dinàmic, en altres paraules, els widgets inclosos en el sidebar.
- get_sidebar(): carrega el template del sidebar (sidebar.php).
- wp_footer(): carrega els scripts i les dades abans de tancar amb les etiquetes body i html.
Bucles de WordPress
El bucle que utilitze dins de WordPress servix per a mostrar articles de manera automàtica:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div><?php the_post_thumbnail('medium');?></div>
<i><?php the_author(); ?></i>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>Amb este codi fem un bucle condicional en què, si hi ha articles de blog, mentre n’hi haja, s’anirà publicant el títol, la imatge, l’autor i un xicotet text d’introducció, i si no n’hi ha, mostrarà un xicotet missatge d’error en anglés.
Truc d’optimització
Realment, com pots observar, hi ha més codis dels necessaris. Ho vaig fer amb l’objectiu d’optimitzar un poc més el codi, de manera que també em fora més còmode treballar en el futur amb el template,
Càrrega selectiva de CSS i JS
Com pots comprovar en el fitxer header.php, faig una càrrega selectiva de dos fulls d’estil diferents, un orientat al blog i un altre orientat a pàgines normals. El codi en qüestió és este:
<?php
if( is_single()):?>
<link rel="stylesheet" href="
<?php echo esc_url( home_url() ); ?>/wp-content/themes/theme-wp/blog.css">
<?php ;
else:?>
<link rel="stylesheet" href="
<?php echo esc_url( home_url() ); ?>/wp-content/themes/theme-wp/pages.css">
<?php ;
endif;
?>Al principi, comprovem si la pàgina és un article del blog o no, amb if (is single()). Si és un article de blog, carrega l’arxiu blog.css, mentre que si no ho és, carrega el page.css.
El que faig per a este template és tindre tres css, un de genèric, un altre per a articles del blog i un altre per a pàgines. Això fa que em siga més fàcil mantindre un estàndard per a tota la web, encara que el realment òptim seria tindre un únic css per a cada pàgina.
Això després ho podem solucionar amb algun plugin, ja que hi haurà altres plugins que deixaran el seu css i caldrà igualment unificar-los tots d’una manera pràctica.
Conclusions
Com pots comprovar, fer un tema per a WordPress és prou senzill. Volia incloure algunes coses més, com la creació de nous dissenys de pàgines i plugins, però crec que amb tot açò n’hi ha prou.
El tema, com podeu comprovar, està un poc en fase beta i la idea és anar millorant-lo a poc a poc amb el temps, així que amb paciència i molt d’afecte aniré donant forma al que és el disseny del meu blog.
Deixe els arxius en Github per si algú vol descarregar els arxius i pujar-los directament a la seua web.
Este article i el seu codi són originals de Diana, que mencione ací baix, i et deixe un enllaç al seu post. El post és el mateix, encara que jo vaig incloure algunes modificacions en el codi i vaig afegir algunes cosetes extra.
Si t’ha agradat el post, t’agraïsc la difusió =)
Fonts
Com crear un tema de WordPress responsive usant HTML5? – Diana C.
Eric Jorge Seguí Parejo
Consultor SEO tècnic a València des de fa més de 16 anys. Ponent i organitzador en WordCamp Valencia i autor en els blogs de Semrush i Publisuites. Més sobre mi
Compartir
