Personalice la visualizaci贸n de sus usuarios de WordPress

En un blog de WordPress con muchos colaboradores, nos gustar铆a poder mostrar informaci贸n sobre cada uno de ellos. A las personas que vienen a leer art铆culos en el blog les gustar铆a saber m谩s sobre los autores: conocer su biograf铆a y sus antecedentes. Adem谩s, les gustar铆a ver el trabajo de otros autores haciendo clic en los enlaces. Este es el caso, por ejemplo, con el sitio de Formaci贸n WP: en cada art铆culo, encontrar谩 informaci贸n sobre el autor.

En este tutorial, veremos c贸mo se muestran los usuarios de WordPress en la plantilla de nuestro tema, c贸mo agregar informaci贸n adicional y modificar la pantalla. Al final, veremos c贸mo mostrar a todos los autores del blog en una p谩gina.

wordpress_users

Instalaci贸n del tema Veinte Veinte

Para estar en las noticias y la frescura, le sugiero que trabaje en la pantalla de “usuarios” directamente desde el futuro nuevo tema predeterminado de WordPress: Veinte

Mientras escribo este tutorial, el tema Veinte No ha salido todav铆a. Estar谩 presente de manera predeterminada en la versi贸n principal 5.3 de WordPress, que se lanzar谩 el 12 de noviembre de 2019. Mientras tanto, una versi贸n maestra est谩 disponible en el repositorio de GithubTambi茅n tenga en cuenta el complemento Twentig que personaliza el tema 2020.

Simplemente descargue el archivo zip aqu铆 :

github_theme_wordpress_twenty_twentyy para instalar el tema, te dejo ver en este tutorial:

C贸mo instalar un tema de WordPress gratuito o premium ?

Creaci贸n de usuarios

Por ejemplo, crearemos varios usuarios en nuestro blog ficticio. Para crear un usuario, tenemos que ir a la pesta帽a de “usuarios” de la administraci贸n.

Encuentra la informaci贸n aqu铆 para agregar un nuevo usuario.

He creado varios usuarios, incluido Laure Ambar.

Por ejemplo, agregamos la extensi贸n “Privacidad de Avatar” lo que le permite agregar avatares muy f谩cilmente sin pasar por Gravatar.com. Est谩 aqu铆 para descubrir c贸mo agregar una extensi贸n.

De ahora en adelante, Laure Ambar puede conectarse con el administrador y completar su perfil.

Aqu铆 est谩 por defecto, los diferentes campos que Laure Ambar tendr谩 que llenar para ver su perfil en la parte inferior de los art铆culos que escribir谩. Aqu铆, todav铆a falta informaci贸n biogr谩fica y la foto de perfil.

wordpress_profil_admin

Creaci贸n de nuevos campos

En la informaci贸n de contacto, actualmente est谩 la direcci贸n de correo electr贸nico y el sitio web, pero tambi茅n nos gustar铆a mostrar enlaces a su perfil Facebook y su perfil twitterEntonces tenemos que agregar campos a “Informaci贸n de contacto”. Para hacer esto, necesitamos modificar nuestro tema y agregar algunas l铆neas al archivo “functions.php”.

Pero antes que nada, crearemos un tema para ni帽os. Para eso, est谩 aqu铆.

Para agregar campos a un perfil, hay un filtro en WordPress: “user_contactmethods” y para usarlo simplemente vaya al c贸dice:

As铆 que solo agregue estas l铆neas al archivo “functions.php” en el tema de nuestros hijos.

function modify_user_contact_methods( $user_contact ) {

	// Add user contact methods
	$user_contact['facebook']   = __( 'Compte Facebook'   );
	$user_contact['twitter'] = __( 'Compte Twitter' );

	return $user_contact;
}
add_filter( 'user_contactmethods', 'modify_user_contact_methods' );

Declaramos una funci贸n “modify_user_contact_methods” y en esta funci贸n, solo agregue la declaraci贸n de los dos nuevos campos en la matriz “$ user_contact”. Al final, la funci贸n se declara a trav茅s del filtro “user_contactmethods”.

De ahora en adelante, la secci贸n “Informaci贸n de contacto” se ve as铆:

wordpress_infos_de_contactY aqu铆 est谩 el perfil de Laure Ambar una vez completado

wordpress_profile_admin

Pantalla predeterminada del usuario

Cuando vamos a un art铆culo, con el tema Veinte (y ese tambi茅n fue el caso Veinticinueve), el autor del art铆culo aparece a continuaci贸n y de esta manera.

perfilEntonces tenemos el avatar, el nombre y la descripci贸n. Y tenemos un enlace a la lista de art铆culos que Laure Ambar ha escrito. Nos gustar铆a publicar otra informaci贸n: enlaces al sitio web, la p谩gina Facebook y la p谩gina twitterA continuaci贸n, agregaremos esta informaci贸n diferente.

Mostrar la plantilla actual

Mostrar el modelo actual es una extensi贸n muy pr谩ctica cuando desea modificar “plantillas” en WordPress. De hecho, a veces es dif铆cil saber qu茅 “plantilla” muestra esta o aquella p谩gina o parte de una p谩gina. Esta extensi贸n nos dice cada vez cu谩l es la “plantilla” principal y las “plantillas secundarias”. Ahorramos mucho tiempo.

Por ejemplo, si volvemos a un art铆culo de Laure Ambar.

Se afirma que la “plantilla” principal es: “singular.php”

show_current_templatey a煤n mejor, al pasar el mouse sobre “Modelo: singular.php”, una lista desplegable muestra las dependencias de la “plantilla” principal: en particular “subtemplados” o partes de “plantillas”.

show_current_template_list_templatesy el que nos interesa cambiar la pantalla del perfil es “entry-author-bio.php” en la carpeta “template-parts”.聽 Las “partes de plantilla” permiten que las plantillas se dividan en partes peque帽as y, por lo tanto, evitan modificar toda la “plantilla”. Est谩 mejor almacenado y encontramos + f谩cilmente la parte que nos interesa. Para mostrar una parte de “plantilla”, se utiliza la funci贸n “get_template_part ()”. Esta funci贸n se describe aqu铆

get_template_part ()

En el archivo “singular.php”, encontramos la funci贸n aqu铆:

get_template_part

En los par谩metros, hay en particular una ruta a la carpeta “template-parts” y al archivo “content.php”.

Y en “content.php” :

template_partencontramos una llamada a la “plantilla” que nos interesa: “entry-author-bio.php”.

Modificar la plantilla

En esta “plantilla”, encontramos las siguientes l铆neas:

template_author_bio

Primero, hay una funci贸n que muestra el avatar “get_avatar ()”. En los par谩metros, se debe indicar el correo electr贸nico o el identificador del “usuario” y los otros par谩metros son opcionales. En esta “plantilla”, los autores de los temas agregaron el ancho de la imagen, 160px. Toda la informaci贸n sobre “get_avatar ()” es aqu铆.

Luego, el nombre del autor se muestra con “get_the_author ()”.

Y finalmente, mostramos la descripci贸n con la funci贸n 鈥榯he_author_meta (). Esta funci贸n muestra los diferentes campos en “informaci贸n de contacto”. Todos los campos predeterminados est谩n listados aqu铆.

Y eso es bueno, usaremos esta funci贸n para mostrar los enlaces que nos interesan (sitio web, Facebook y twitter). Para ver cada enlace, lo usaremos Hazlo impresionanteEsto le permite agregar r谩pidamente pictogramas en el html. Un tutorial que explica todo sobre. Hazlo impresionante:

Integre Font Awesome en su sitio de WordPress

Para modificar el archivo, creamos el mismo archivo en el tema de nuestros hijos en una carpeta “template-part” :

veintid贸s_wordpress_child

En este archivo, copiamos todas las l铆neas del archivo original y agregaremos estas l铆neas que nos interesan:
add_display_meta_author
En un p谩rrafo, agregamos los tres enlaces que nos interesan con la visualizaci贸n de un “icono” de Hazlo impresionante.

Y para la traducci贸n, usemos la extensi贸n de traducci贸n loco

Una vez que se han realizado estas modificaciones, la pantalla da esto:

autor_bio

Un poco de CSS

A partir de ah铆, podemos modificar el CSS a nuestra conveniencia. Simplemente seleccione la clase “autor-bio” con el inspector Firefox o cromo.

firefox_inspectorEn la parte inferior derecha, se indica el CSS asignado a la clase “autor-bio”, as铆 como el n煤mero de l铆nea en el archivo. En esta l铆nea, en el archivo “style.css”, encontramos estas l铆neas de c贸digo :

autor_bio_css

Simplemente sobrecargue este CSS en el archivo “style.css” del tema de nuestros hijos.

Ejemplo: si queremos poner un fondo alrededor de nuestro perfil y agregar una sombra, agregamos estas l铆neas CSS:

.author-bio {
    background-color: #F5F5F5;
    padding: 6rem;
    box-shadow: 5px 5px 5px #888888;
}

.author-bio .avatar {
    position: relative;
}

agregamos uno acolchado e indicamos una posici贸n relacionada con nuestro avatar (en Tveinte veinte, 茅l est谩 en posici贸n absoluto).

Y entendemos esto :

display_author_bioMostrar una lista de usuarios

Ahora veamos c贸mo mostrar a todos los autores de los art铆culos del blog en una p谩gina.

Creaci贸n de una p谩gina personalizada

Para comenzar, creamos una p谩gina personalizada o p谩gina “plantilla”. Todo est谩 muy bien explicado en este tutorial:

C贸mo crear una p谩gina personalizada en WordPress ?

Nuevamente, la extensi贸n “Mostrar el modelo actual” se usa para averiguar qu茅 “plantilla” muestra las p谩ginas del tema VeinteEs “singular.php”. Entonces, copiamos el contenido de “singular.php” en un archivo llamado “page-users.php” que colocamos en el tema de los ni帽os.

El archivo “singular.php” utiliza la “plantilla” “content.php” en la carpeta “template-parts”. Tenemos que cambiar eso porque queremos contenido espec铆fico para esta p谩gina. Por lo tanto, creamos una nueva “plantilla” en la carpeta “templa-parte” del tema infantil que se llama, por ejemplo: users.php. Y pegamos el contenido de “content.php”

En “page-users.php”, colocamos esto:

get_template_part( 'template-parts/users', get_post_type() );

Queda por crear una p谩gina en la administraci贸n del sitio y usar la “plantilla” que acaba de crearse.

Esta nueva p谩gina en realidad se refiere a las buenas “plantillas”:

show_current_templateConsigue usuarios

Para mostrar la lista de autores, utilizamos una funci贸n llamada “get_users ()”. Encontramos toda la informaci贸n aqu铆

En los par谩metros de la funci贸n, puede poner muchas cosas, lo que le permite mostrar a los usuarios de acuerdo con los filtros y par谩metros. Aqu铆, solo queremos el rol de “editor”, por lo que ponemos esto en los par谩metros de la funci贸n (no queremos, por ejemplo, mostrar el rol de administrador):

'role=editor'

La funci贸n devuelve uno matriz. Un bucle foreach es necesario navegar por todos los resultados (hay varios “usuarios”) :

Entonces, para mostrar los nombres de los usuarios, colocaremos esto en “users.php”:

get_user_in_templatey en parte delantera, da eso :

display_usersPara completar, mostraremos la misma informaci贸n vista anteriormente en los art铆culos. Mostraremos el avatar, la biograf铆a y los enlaces al sitio web, la p谩gina Facebook y twitter.

get_userspara mostrar el avatar, todav铆a usamos la funci贸n “get_avatar ()”. En los par谩metros, indicamos el identificador. Para los dem谩s, estos son los mismos par谩metros que se llamaron anteriormente con la funci贸n “the_author_meta ()”.

y en parte delantera, ahora tenemos esto :

display_all_editorsNo vamos a hacer esto aqu铆, pero puede cambiar completamente el estilo de la pantalla agregando clases html y agregar l铆neas en la hoja de estilo CSS. Tu decides …

En conclusi贸n

A trav茅s de estos pocos p谩rrafos, hemos visto c贸mo modificar la visualizaci贸n de usuarios en las p谩ginas de su blog de WordPress. Para este trabajo, descubrimos algunas funciones de WordPress, y a partir de eso, ahora podemos imaginar una variaci贸n casi infinita de usos.

Si las extensiones hacen este trabajo muy bien, siempre es interesante sumergirse un poco en el c贸dice e intentar modificar las “plantillas” existentes. Cuando sepa lo que quiere hacer, simplemente agregue algunas l铆neas de c贸digo y r谩pidamente tenemos resultados convincentes.

Te puede interesar:  C贸mo instalar un complemento de WordPress gratuito o premium ?

Deja una respuesta

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

Share This