Con varios conceptos básicos y un poco de código podremos crear una theme WordPress SEO Optimization desde cero y empezar a utilizar tus propias themes WordPress para tus clientes.
En un post anterior hablé del problema o los problemas que tienen nuestros clientes para entender el panel de control de las Themes WordPress Premium y es por eso de que no hay mejor forma de optimizar un WordPress que creando tu mismo la Theme.
Vamos a empezar creando los archivos bases necesarios para la creación de nuestra theme WordPress.
Abrimos cualquier programa que utilizamos para programar php como pueden ser notepad++ o dreamweaver y creamos los siguientes archivos:
En este archivo solo insertaremos lo justo y necesario. Piensen que cuanta más información metamos en la cabecera más tiempo tardará en cargar nuestra página web.
En el post de Optimización SEO está era una de las claves para que nuestra página alcanzara un 98/100 en PageSeed Insights.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body>
Sigamos ahora con el footer de nuestra página web. Si os fijáis en nuestro header.php, no hemos cargado nuestras css, es aquí donde las cargaremos, ¿por qué?, por la velocidad de carga de nuestra web.
<link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php wp_footer(); ?> </body> </html>
Aquí es donde verdaderamente está la clave de WordPress, en el archivo functions es donde insertaremos todos los códigos necesarios para habitar los thumbnails, registrar nuestro menú, etc..
En nuestro caso vamos a realizar dos o tres funciones básicas y una avanzada para cargar nuestros javascripts del header en el footer:
<?php
// Registro del menú de WordPress
add_theme_support( 'nav-menus' );
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'main' => 'Main'
)
);
}
// Sidebar
if(function_exists('register_sidebar'))
register_sidebar(array(
'name' => 'Main Sidebar',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
// Habilitar thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, true);
// Cargar en el footer los javascripts
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
?>
Básico también para la creación de cualquier theme WordPress SEO. Primero porque es donde vamos a dar estilos, no necesariamente en este archivo, a nuestra web. Y segundo y más importante es porque es donde vamos a nombrar el nombre de nuestra theme WordPress para que aparezca en nuestro panel de control y la podamos seleccionar:
/* Theme Name: Vinti7 Theme URI: https://vinti7.com Author: Vinti7 Author URI: https://vinti7.com Description: Theme Vinti7 Version: 1.0 License: Vinti7 License URI: https://vinti7.com Tags: Vinti7, diseño web, diseño gráfico, diseño wordpress, plantillas wordpress, posicionamiento SEO. Text Domain: Vinti7 */
Este será el nombre de una plantilla personalizada que crearemos para mostrar el contenido de nuestra página home. Para crear plantillas personalizadas es muy sencillo, solamente hay que crear un archivo .php y ponerle Template Name: Nombre de la plantilla, en el ejemplo lo veréis mejor:
<?php
/**
* Template Name: Home
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>
Este es el contenido que se mostrará cuando en nuestra theme hagamos una petición para que nos muestre el sidebar:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Main Sidebar') ) : ?><?php endif; ?>
También este es un archivo importantísimo en WordPress porque es lo que mostrará cuando indiquemos que queremos usar un blog en nuestra theme WordPress.
La única explicación que hay que tener en cuenta en esta parte, es que el contenido en si de cada post se mostrará en el content.php mediante la llamada get_template_part:
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<?php if ( is_home() && ! is_front_page() ) : ?>
<h1><?php single_post_title(); ?></h1>
<?php endif; ?>
<?php while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
else :
get_template_part( 'content', 'none' );
endif; ?>
<?php get_footer(); ?>
Aquí es donde mostramos el post en sí.
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; ?>
<?php get_footer(); ?>
Archivo que nos mostrará el contenido de nuestros post.
En el archivo index.php y single.php realizamos una llamada a dicho archivo:
<h2><?php the_title(); ?></h2> <?php the_content(); ?>
Este es el archivo que nos mostrará el error en pantalla cuando no existe la url que el usuario está buscando, lo abrimos y ponemos lo siguiente:
<?php get_header(); ?>
<h1>Página no encontrada</h1>
<p>Error 404</p>
<?php get_footer(); ?>
Y para finalizar creamos un archivo .png que le nombraremos como screenshot.png, cuyas dimensiones serán: 880px de ancho por 660px de alto.
Esta imagen que hemos creado es la que mostrará en el apartado Apariencia/Temas de nuestro panel de control WordPress.
Con está theme tendremos una base solidad para tener nuestra theme creada en WordPress y optimizada para SEO. Ahora solo quedaría que insertemos el contenido y le demos estilo mediante nuestro archivo style.css a nuestra theme WordPress.
Para insertar contenido, les recomiendo que se lean el Post de como personalizar nuestro theme WordPress. Utiliza esta theme WordPress SEO para comenzar cualquier trabajo WordPress desde cero y empieza a sacar resultados de posicionamiento.
Si queréis tener más información sobre nosotros estas son nuestras redes sociales:
Facebook Vintiset
Instagram Vintiset
Twitter Vintiset
Pinterest Vintiset
Muchas gracias por dedicar tiempo en nosotros.