GeneratePress es uno de los mejores temas para WordPress y uno de los más livianos.
Si somos sinceros te darás cuenta que este tema esta muy limitado si lo comparamos con Kadence y Blocksy, dos de sus principales rivales.
Si deseas implementar otras secciones en GeneratePress deberas adquirir GP-Premium y no deberas usar un child theme, CSS y HTML
En esta publicación te enseñaré a crear una caja de autor (box author) usando PHP, CSS y HTML en la versión gratuita del tema
Table of Contents
Pasos para Crear una Caja de Autor con GeneratePress
Si tienes GP-Premium y deseas continuar usando su sección de elementos, te recomiendo seguirlo usando ese método.
En caso que quieras ensuciarte las manos un poquito, estos son los pasos para tener una caja de autor al final de tus publicaciones.
1. Código PHP y HTML
Lo primero que debes hacer es agregar un fragmento de código en tu sitio y eso lo podemos lograr de tres formas:
- Instalando y usando un plugin de snippets
- Creando un tema hijo y agregando el snippet en el functions.php file
- Usando el folder de mu-plugin
Mi manera favorita de hacerlo es usando un mu-plugin, por lo que asegúrate escribir mi publicación con respecto a este tema.
En esa carpeta agregarás este fragmento de código:
<?php
/*
Plugin Name: Author Box
Plugin URI: https://wpsurfer.com
Description: Add an AuthorBox to Posts
Version: 1.0
Author: TicoLibre
Author URI: https://wpsurfer.com
*/
function authorbox() {
if ( is_single() ) {
echo '<div class="author-box">';
echo '<div class="avatar">';
echo get_avatar( get_the_author_meta( 'ID' ), 250 );
echo '</div>';
echo '<div class="author-info">';
echo '<h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">';
echo '<span itemprop="name">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</span>';
echo '</h5>';
echo '<div class="author-summary">';
echo '<p class="author-description">' . wp_kses( get_the_author_meta( 'description' ), null ) . '</p>';
echo '</div>';
echo '<div class="author-links">';
// Add LinkedIn icon and link
echo '<a href="https://www.linkedin.com/company/nombre_compañia/" target="_blank" rel="noopener noreferrer">';
echo '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">';
echo '<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>';
echo '</svg>';
echo '</a>';
// Add Linktree icon and link
echo '<a href="https://linktr.ee/usuario" target="_blank" rel="noopener noreferrer">';
echo '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">';
echo '<path d="M210.6 5.9L62 169.4c-3.9 4.2-6 9.8-6 15.5C56 197.7 66.3 208 79.1 208H104L30.6 281.4c-4.2 4.2-6.6 10-6.6 16C24 309.9 34.1 320 46.6 320H80L5.4 409.5C1.9 413.7 0 419 0 424.5c0 13 10.5 23.5 23.5 23.5H192v32c0 17.7 14.3 32 32 32s32-14.3 32-32V448H424.5c13 0 23.5-10.5 23.5-23.5c0-5.5-1.9-10.8-5.4-15L368 320h33.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L344 208h24.9c12.7 0 23.1-10.3 23.1-23.1c0-5.7-2.1-11.3-6-15.5L237.4 5.9C234 2.1 229.1 0 224 0s-10 2.1-13.4 5.9z"></path>';
echo '</svg>';
echo '</a>';
// Add Facebook icon and link
echo '<a href="https://www.facebook.com/nombre_pagina/" target="_blank" rel="noopener noreferrer">';
echo '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">';
echo '<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>';
echo '</svg>';
echo '</a>';
echo '</div>'; // Close the author-links div
echo '</div>'; // Close the author-info div
echo '</div>'; // Close the author-box div
}
}2. Modificar Copia del Archivo content-single.php
Una vez que hayas agregado ese código, debes hacer una copia del archivo llamado content-single.php y agregarlo al folder de tu child-theme.
Lo hacemos de esa manera, porque las actualizaciones de temas borran los cambios hechos directamente a los archivos del tema original.
Debes agregar este código en la linea 101 del archivo content-single.php
<?php authorbox(); ?>Esa modificación permite llamar el contenido genero por la anterior function.
3. Agregar CSS
El ultimo paso que debes realizar consiste en agregar el CSS que permitirá que la caja de autor luzca de la manera que deseamos.
Este es el CSS que permite que nuestra caja luzca como la caja de autor al final de la publicación:
/*CSS for Author Box*/
.author-description,.author-links a{line-height:2em}.author-box{padding:3% 3% 10px;margin-top:30px;font-size:16px;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow:0 9px 28px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}.author-box .avatar{width:250px;height:auto;border-radius:100%;margin-right:30px}h5.author-title{margin-bottom:.1em;font-weight:600}.author-links a{font-size:1.5em;padding-left:13px;float:left}@media (max-width:768px){.author-box{padding:20px 20px 25px;margin-top:60px;flex-direction:column;text-align:center}.author-box .avatar{margin-right:0;width:100%;margin-top:-25px}.author-box .avatar img{max-width:150px}.author-links a{float:none;align-self:center}.author-description{margin-bottom:-.1em}}
Este CSS se puede agregar de muchas maneras, pero yo opto por agregarlo en la hoja de estilos de mi child theme.
Si deseas desminificar el CSS para realizar otros cambios, puedes hacerlo con uminify.com
