Muéstrate fuera con un cuadro de autor personalizado

Los blogs de múltiples autores se están volviendo cada vez más populares y con buena razón. Crear contenido regular y atractivo a menudo puede ser un desafío para un blogger individual. Con varios autores, puede ser mucho más fácil y también le permite cubrir una mayor variedad de temas a partir del conocimiento de varias personas. En sitios como Wptuts + puedes leer artículos de un gran equipo de escritores y bloggers, todos tenemos nuestro propio estilo de escritura y personalidades. Al igual que Wptuts +, en la mayoría de los sitios de varios autores, encontrará un pequeño cuadro de información de autor en algún lugar de la página. Hoy voy a mostrarte cómo puedes crear uno para tu propio sitio..

WordPress es una plataforma de contenido y blogs de múltiples autores ya hecha. Todas las herramientas que necesitamos están integradas, solo necesitamos saber cómo usarlas..

Todo comienza con un perfil

Escondido en la barra de administración de WordPress (cuando está conectado), todos los usuarios tienen acceso al enlace "Editar mi perfil". Lo lleva a la página donde establece cómo se muestra su nombre en el sitio, es donde cambia su contraseña y dirección de correo electrónico. También es el lugar donde puede ingresar información de contacto realmente útil, moderna y actual, como AIM, Yahoo IM y detalles de Google Talk (/ sarcasmo). Lo sé, porque hago lo mismo, siempre has ignorado la mayor parte. Si no utilizas estos campos, ¿por qué rellenarlos? Nuestro cuadro de autor usará estos campos y los haremos un poco más útiles.!

Campos extra

Es muy fácil para nosotros eliminar los métodos de contacto que no queremos usar y reemplazarlos con algo un poco más actual. Así que lo primero es lo primero que necesitas para abrir el tema. funciones.php (o coloque esto en un complemento si lo prefiere) y vamos a trabajar.

 function wptuts_contact_methods ($ contactmethods) // Elimine lo que no queremos que no se establezca ($ contactmethods ['aim']); unset ($ contactmethods ['yim']); unset ($ contactmethods ['jabber']); // Agrega algunos útiles $ contactmethods ['twitter'] = 'Nombre de usuario de Twitter'; $ contactmethods ['facebook'] = 'URL del perfil de Facebook'; $ contactmethods ['linkedin'] = 'URL del perfil público de LinkedIn'; $ contactmethods ['googleplus'] = 'URL del perfil de Google+'; devuelve $ contactmethods;  add_filter ('user_contactmethods', 'wptuts_contact_methods');

Lo primero que estamos haciendo es eliminar algunos campos bastante inútiles, y luego simplemente agregamos los campos adicionales que deseamos. La primera parte debe ser única para el texto que puede ingresar, ya que esto es lo que se mostrará junto al campo en la página de perfil..

Si vuelve a visitar su página de edición de perfil, ahora debería ver que han aparecido sus campos adicionales y que los inútiles han desaparecido..

Ahora que tenemos un lugar donde podemos almacenar nuestra información adicional, podemos continuar trabajando con los datos y cómo podemos mostrarlos en la parte delantera de nuestro sitio..

Mostrarse apagado

Así que queremos mostrar una foto de nuestro autor, una pequeña descripción / biografía y algunos enlaces a sitios de redes sociales.

WordPress maneja fotos de perfil de usuario usando Gravatar. Queremos usar la función de WordPress get_avatar () esto recupera el Gravatar para el ID de usuario o la dirección de correo electrónico especificados.

Puede especificar el tamaño de la imagen y también qué hacer si el usuario no tiene un Gravatar. El parámetro final le permite configurar el texto alternativo para el avatar. Por ahora vamos a utilizar el siguiente código:

Esto arrastra el Gravatar a 70px x 70px y usa la ID de usuario del autor para la publicación actual.

También queremos obtener parte de la información básica del perfil de usuario, como el nombre y la descripción del usuario. Echemos un vistazo a un ejemplo básico..

Los basicos

    
 
  "> →',' tuts_plus '), get_the_author ()); ?>

El código anterior da un buen punto de partida. Abre tu single.php (Estoy usando Twenty Twelve para los fines de este artículo) y pegue el código anterior dentro del bucle pero sobre su plantilla de comentarios. (Línea 25 si también está utilizando Twenty Twelve). Ahora veamos lo que estamos haciendo.

Ya hemos hablado de la get_avatar () función pero más abajo verá la get_the_author () función. Esto simplemente recupera el post autor. En nuestro ejemplo, imprimimos el nombre del autor en la parte superior de nuestro cuadro de autor. Mostrará lo que el usuario haya seleccionado como "Mostrar nombre públicamente como". Usted podría simplemente usar:

Sin embargo, prefiero escapar de todos mis resultados y permitir la opción para traductores..

A continuación vemos get_the_author_meta (). Vamos a utilizar esto bastante. Esta función devuelve los metadatos deseados para el usuario dado. Si lo usamos dentro de un bucle, no necesitamos especificar el ID de usuario, sin embargo, se puede usar fuera del bucle pasando el ID de usuario. Al usar esta función, puede obtener un rango de información; en el ejemplo anterior, lo estamos usando para extraer la descripción que es el cuadro de biografía que puede completar en la página de perfil del usuario. Al igual que con el nombre del autor, estoy escapando de la salida para asegurarme de que nuestros autores no hayan ocultado ningún desorden!

Finalmente, tenemos un enlace en la parte inferior que enlaza a nuestra página de autor. Usamos el get_author_posts_url () Función para simplemente darnos la URL. WordPress crea automáticamente páginas de autor para todos los usuarios del sitio que han publicado publicaciones..

Añadamos algo de CSS y veamos cómo se ve:

 .media, .bd desbordamiento: oculto; _desbordamiento: visible; zoom: 1;  .media img, .media .img float: left; margen derecho: 10px;  .media img display: block;  .media .imgExt float: derecha; margen izquierdo: 10px;  .profile margin-top: 10px; relleno: 20px 10px; borde: sólido delgado # c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0.75); caja-sombra: 7px 7px 5px rgba (50, 50, 50, 0.75);  .profile-links padding: 5px 0;

Social Shizzle Wizzle

Así que tenemos una caja básica, pero ¿qué hay de todos esos campos adicionales que agregamos? Podemos usar el get_the_author_meta () Función para recuperar esos campos personalizados tal como lo hicimos con la descripción. Revisemos juntos el siguiente ejemplo, un reemplazo de nuestra división anterior de "enlaces de perfil":

    ">
   ">
   ">
   ">
  
 "> →',' tuts_plus '), get_the_author ()); ?>

Hemos creado una lista desordenada y cada elemento de la lista será nuestros campos adicionales que agregamos al comienzo del artículo. En primer lugar, hacemos un chequeo bruto para asegurarnos de que se ingrese un valor para cada uno de ellos, ya que no queremos que aparezcan enlaces que no hagan nada. A continuación, creamos un enlace basado en la información ingresada en el perfil del usuario. Como puede ver en el ejemplo, formamos el enlace usando el mismo get_the_author_meta () función, sin embargo, dependiendo de lo que estamos emitiendo utilizamos una función de validación diferente. Para el enlace de Twitter, ya que solo ingresamos un nombre de usuario y agregamos que a nuestro enlace eliminamos cualquier HTML del mismo usando wp_kses () para los demás, ya que estamos ingresando las URL de perfil completo en nuestra página de perfil que estamos usando esc_url () para garantizar que son URLs correctamente formados. Te he mostrado dos formas diferentes de hacerlo para que puedas ver cuán flexible puede ser.

Añadiendo un poco más de CSS podemos personalizarlo y ya casi hemos terminado.!

 .enlaces sociales li padding: 5px; pantalla: en línea; estilo de lista: ninguno; texto-sangría: -9999px; flotador izquierdo;  .social-links li a background-position: 0 0; repetición de fondo: no repetición; ancho: 16px; altura: 16px; bloqueo de pantalla;  .twitter-link background: url (images / twitter.png) no se repite;  .facebook-link background: url (images / facebook.png) no se repite;  .linkedin-link background: url (images / linkedin.png) no se repite;  .google-link background: url (images / google-plus.png) no se repite;

El CSS que estoy utilizando para fines de demostración solo puede, por supuesto, hacer lo que quiera con su propio estilo!

Obteniendo lujo

Ahora que tenemos nuestra caja básica podemos agregar todo tipo de características adicionales. Vamos a crear una tarjeta de perfil de LinkedIn dinámica cuando se desplace sobre el icono de LinkedIn.

Primero necesitamos crear algunas funciones. Necesitamos poner en cola la biblioteca de JavaScript de LinkedIn en nuestras publicaciones de blog y en nuestras páginas de autores (más sobre esto más adelante).

 función wptuts_linkedin_js () if (is_single () || is_author ()): wp_enqueue_script ('linkedin', '//platform.linkedin.com/in.js', null, null, true); terminara si;  add_action ('wp_enqueue_scripts', 'wptuts_linkedin_js');

Agregue el código anterior a su tema funciones.php o donde sea que haya agregado el código para cambiar sus métodos de contacto. Esto asegurará que ahora tengamos cargado el JavaScript requerido pero solo en las páginas donde sea necesario.

A continuación vamos a crear una pequeña función para realizar la funcionalidad de desplazamiento basado en el autor que estamos viendo:

función wptuts_linkedin ($ author) $ authorinfo = get_user_meta ($ author); $ linkedin = $ authorinfo ['linkedin'] [0]; if (isset ($ linkedin)):?>

Lo primero que debe notar es que en realidad necesitamos pasar un parámetro a esta función cuando la llamamos. Queremos pasar el ID de usuario del autor para el que queremos crear la tarjeta de desplazamiento. Esencialmente, lo que estamos haciendo es obtener los metadatos del usuario usando get_user_meta () Luego sacamos nuestra URL de LinkedIn que creamos en la primera mitad del artículo. Luego simplemente agregue esa variable a nuestro JavaScript de LinkedIn para que devuelva la tarjeta de desplazamiento del usuario correcta. Aquí está la actualización single.php extraer:

    ">
   ">
   
   ">
  
 
 "> →',' tuts_plus '), get_the_author ()); ?>

Como puedes ver, llamamos a nuestra función de LinkedIn usando wptuts_linkedin (get_the_author_meta ('ID')) esto pasa a través del ID de usuario del autor correcto que se utilizará en nuestra función. Un par de simples ajustes de CSS para que se muestre correctamente:

 .linkedin-link text-indent: 0! important;

Como puede ver ahora, tenemos nuestro cuadro de autor con una bonita tarjeta de desplazamiento para nuestro perfil de LinkedIn!

Página de autor

A menudo es bueno mostrar este cuadro de autor en la parte superior de la página de archivo de un autor. Twenty Twelve ya hace parte del trabajo para nosotros en autor.php. Así que podemos agregar lo que hemos aprendido anteriormente para agregar nuestra información adicional.

Conclusión

Así que ahí lo tenemos. Ahora sabe cómo modificar sus métodos de contacto, cómo extraer información diferente de un perfil de usuario y mostrarla en sus publicaciones de blog. Hay mucho más que puedes hacer dependiendo de lo que quieras lograr. Intente agregar un enlace al sitio web del usuario, muestre sus últimos Tweets, obtenga un historial de confirmación de GitHub; Las opciones son infinitas. Todo el código final se puede encontrar a continuación.

Vector iconos de redes sociales por IconDock.com y Double-J Design

URL: http://icondock.com/free/vector-social-media-icons

Código