autor del cuadro de meta descripción de los iconos sociales

Un usuario preguntó 👇

Hola hermosa WP-People,

Tengo un pequeño problema y no puedo solucionarlo. Estoy usando un tema que me da la posibilidad de tener un informe de autor después de cada publicación e incluye la posibilidad de agregar un enlace de autor y un perfil de Twitter. Desafortunadamente no hay otros íconos sociales. Logré agregar los iconos, pero no puedo obtener el CSS para el formato correcto. En cuanto agrego algún código para ajustar los tipos, tomé en cuenta que desaparecen. tal vez tienes una idea?

Aquí está el «historial» completo del código que agregué: 1. No tuve que agregarlo
user_contact_methods porque utilizo Yoast SEO Plugin, que ya los agrega.

2. agregue código al cuadro del autor

<?php if(get_the_author_meta('user_url') ): ?>
		<?php
		$author_url = get_the_author_meta('user_url');
			$to_remove = array( 'http://', 'https://' );
			foreach ( $to_remove as $item ) {
			$author_url = str_replace($item, '', $author_url);
		}
		echo '<a class="author-website" href=' . get_the_author_meta('user_url') .'> '  . $author_url . ' </a>';
		?>
		<?php endif; ?>

		<?php
		if(get_the_author_meta('twitter') ): ?>
			<a class="author-twitter" target="_blank" rel="noopener noreferrer" href="https://www.twitter.com/<?php echo get_the_author_meta('twitter'); ?>"><?php echo get_the_author_meta('twitter'); ?></a>
		<?php endif; ?>

	<?php
	if(get_the_author_meta('facebook') ): ?>
			<a class="author-facebook" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/<?php echo get_the_author_meta('facebook'); ?>"><?php echo get_the_author_meta('facebook'); ?></a>
		<?php endif; ?>

	<?php
	if(get_the_author_meta('instagram') ): ?>
		  <a class="author-instagram" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/<?php echo get_the_author_meta('instagram'); ?>"><?php echo get_the_author_meta('instagram'); ?></a>
		<?php endif; ?>

3. He incluido el siguiente CSS para los tipos (ya están cargados en el tema como fuente)

.author-links a.author-facebook:before {
 font: normal 18px/1 'Genericons';
 content: 'f203';
}
.author-links a.author-instagram:before {
 font: normal 18px/1 'Genericons';
 content: 'f215';
}

4. y para ajustar la distancia entre las cuentas sociales utilicé el siguiente código CSS

.author-links a.author-facebook, 
.author-links a.author-twitter {
    margin: 4px 30px 0 0;
}

5. y para ajustar la altura de los tipos

.author-links a.author-website:before,
.author-links a.author-twitter:before,
.author-links a.author-facebook:before,
.author-links a.author-instagram:before {
 display: block;
 position: absolute;
 top: 2px;
 left: -4px;
 text-align: left;
}

tan pronto como ingreso el código CSS para ajustar los tipos que se disuelven, ¿y no puedo averiguar por qué?

¿Alguien piensa?

Gracias por la ayuda de antemano, Jo

(@bcworkz)

Hace 1 año, 6 meses

No desaparecieron, se movieron a la esquina superior izquierda del cuadro de autor porque no están restringidos al enlace relacionado, por lo que todo el sitio se aplica en relación con el cuadro de autor. Los atributos de visualización / ubicación aplicados a sus enlaces adicionales difieren de los enlaces originales. Hágalo con:

.author-links a.author-facebook,
.author-links a.author-instagram {
    margin: 4px 30px 0 0;
    display: inline-block;
    position: relative;
    padding: 0 0 0 18px;
}

(@kilikoi)

Hace 1 año, 6 meses

Hola @bcworkz,

muchas gracias por tomarse el tiempo, si ingreso su código de lo que les parece, pero no cambia nada en el estilo incorrecto de los tipos genéricos que se comparan con los formularios genéricos de Twitter y el enlace del autor . Son mucho más altos que los otros dos. ¿algunas ideas?

Gracias,

Jo

(@bcworkz)

Hace 1 año, 6 meses

Las reglas que publicó anteriormente parecen ser:

.author-links a.author-website:before,
.author-links a.author-twitter:before,
.author-links a.author-facebook:before,
.author-links a.author-instagram:before {
 display: block;
 position: absolute;
 top: 2px;
 left: -4px;
 text-align: left;
}

ahora les faltan los selectores FB e IG adicionales. Reemplácelos y la ubicación debería verse bien. Partes faltantes:

, .author-links a.author-facebook:before,
.author-links a.author-instagram:before

(@kilikoi)

Hace 1 año, 6 meses

whooop … muchas gracias, tuve que sobrescribir accidentalmente el código. Ahora todo es perfecto. me alegraste el día @bcworkz. Muchas gracias por tu ayuda.

(@kilikoi)

Hace 1 año, 6 meses

Ahora estoy cerrando este hilo porque está resuelto.

¿Solucionó tu problema??

SíNo

0 / 0