Title y description sin plugin para WordPress

Hoy creo que vamos a ir un paso más allá en nuestras funciones de código PHP, lo que pensamos hacer hoy es conseguir que nuestros artículos posean un campo para rellenar el title y el description que después aparecen en el Header de nuestro WordPress, pero lo mejor de todo es que lo vamos a conseguir sin ningún plugin.

Lo normal para conseguir esto es utilizar plugins como “All in one seo” o “Yoast seo”, hay más pero estos dos son los más utilizados, nosotros lo que pensamos hacer es crear dos custom fields y tres campos dinámicos para mostrar el resultado que aparecerá en Google.

Empecemos pues, lo primero que debemos hacer es ir a la carpeta de nuestro Theme y crear una sub carpeta llamada “custom-fields”, esto es por que dentro de está carpeta crearemos el archivo que armará los custom fields en el WordPress y nuestros artículos.

Seguidamente abrimos nuestro ID de programación favorito y creamos un archivo PHP en blanco, dentro de el copiaremos y pegaremos el siguiente código.




<?php
/* custom field para las meta etiquetas title y description */
function my_url_add_metabox() {
   
add_meta_box(
        
'my_url_section',
        
'Title y Description del artículo',
        
'my_url_metabox_callback',
        
'post'
    
);
}
add_action'add_meta_boxes''my_url_add_metabox' );
function 
my_url_metabox_callback$post ) {
    
wp_nonce_field'my_url_metabox''my_url_metabox_nonce' );
    
$url1 get_post_meta$post->ID'_my_url1'true );
    
$texto1 get_post_meta$post->ID'_my_texto1'true );
   
?>
        <p><label>Title</label><input style="width: 70%; float:right;" type="text" name="my_texto1" value="<?php echo $texto1?>" size="30" class="regular-text" /></p>
        <p><label>Description</label><input style="width: 70%; float:right;" type="text" name="my_url1" value="<?php echo $url1?>" size="30" class="regular-text" /></p>
        <div style="border:1px solid #ccc;padding:10px 10px 10px 10px;;">
            <span style="color: #443ABA;text-transform:uppercase"><?php echo $texto1?></span><p></p>
            <span style="color:#006621;maring-top:-10px;"><?php echo the_permalink(); ?></span><br />
            <span><?php echo $url1?></span>
        </div>
   <?php
}
function 
my_url_save_metabox$post_id ) {
   if ( ! isset( 
$_POST['my_url_metabox_nonce'] ) ) {
      return;
   }
   
$nonce $_POST['my_url_metabox_nonce'];
   if ( ! 
wp_verify_nonce$nonce'my_url_metabox' ) ) {
      return;
   }
   if ( 
defined'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
      return;
   }
    if ( ! 
current_user_can'edit_post'$post_id ) ) {
      return;
   }
   if ( ! isset( 
$_POST['my_url1'] ) ) {
      return;
   }
   if ( ! isset( 
$_POST['my_texto1'] ) ) {
      return;
   }
   
$url1 $_POST['my_url1'];
   
$texto1 $_POST['my_texto1'];
   if ( empty( 
$url1 ) ) {
      
delete_post_meta$post_id'_my_url1' );
   } else {
      
update_post_meta$post_id'_my_url1'$url1 );
   }
   if ( empty( 
$texto1 ) ) {
      
delete_post_meta$post_id'_my_texto1' );
   } else {
      
update_post_meta$post_id'_my_texto1'$texto1 );
   }
}
add_action'save_post''my_url_save_metabox' );
?>

Como veis es un código largo, pero lo importante es que estamos creando dos campos, “_my_url1” y “_my_texto1”, el primer campo es que dará valor a la meta etiqueta title de nuestro WordPress, el segundo campo es que dará valor a la meta etiqueta descripción de nuestro WordPress, ahora lo guardamos en la sub carpeta que hemos creado con el nombre “title-description.php”.

Pero todavía no hemos terminado, aún nos queda código por añadir para que todo funcione correctamente, este código en si solo no hará nada, para que haga algo debemos abrir nuestro functions.php y añadir la siente linea de código.




<?php
//campos personalizados
require_once dirname(__FILE__) . '/custom-fields/title-description.php'//para el title y la descripcion
?>

Ahora sí, en estos momentos desde el functions.php lo hemos llamado para que se active y se muestre en nuestros artículos, ahora al final de cada artículo podremos ver un nuevo campo personalizado llamado “title y description” donde también veremos el ejemplo de como quedará en los resultados de búsqueda, veremos algo como lo siguiente.

Pero todavía no hemos terminado de agregar código, lógicamente para que todo funcione correctamente, necesitamos añadir un poco de código más, esta vez en nuestro archivo header.php, de manera que lo abrimos con nuestro ID de programación favorito y copiamos y pegamos lo siguiente después de la etiqueta head.




<?php
$title 
get_post_custom_values('_my_texto1');
$description get_post_custom_values('_my_url1');
echo 
'<title>'.$title[0].'</title>';
echo 
'<meta name="description" content="'.$description[0].'" />';
?>

Como veis lo que hacemos es llamar a los dos custom fields que habíamos creado anteriormente y los imprimimos en las meta etiquetas title y description para que los buscadores las cojan y las indexen como dios manda.

Y esto es todo, con esto conseguimos tener nuestro propio plugin seo para WordPress, si analizáis bien el primer código vosotros mismos veréis que se pueden añadir más campos, como la url canónica o cualquier otra cosa que queráis, nosotros hemos hecho lo básico, ahora es cosa vuestra el mejorarlo.

20 febrero, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: