Blog

Afegir més xarxes socials al peu i la capçalera de la plantilla de wordpress Divi

Comparteix a

La plantilla de wordpress Divi permet posar, des de la seva zona de configuració, 4 xarxes socials: facebook, twitter, Google+ i instagram. Però què podem fer si nosaltres en tenim alguna altra. 

La solució és senzilla però hauriem de treballar amb una plantilla Child (filla) de l’original.

La plantilla Divi utilitza el fitxer que hi ha a la carpeta del tema includes/social_icons.php per pintar les xarxes socials tant de la capçalera com del peu. Si modifiquem aquest fitxer directament en les properes actualitzacions podriem perdre aquestes modificacions, per això recomanem treballar amb un Child theme.

El que cal fer és crear una carpeta includes a l’arrel del nostre child theme i copiar-hi aquest fitxer per poder-lo modificar. 

Quines modificacions cal fer?

Per cada xarxa social dins el fitxer hi ha un codi semblant a aquest. A l’exemple he posat el codi de twitter.

Dins aquest tros de codi fa un if per saber si la xarxa en concret està indicada a les opcions de la plantilla i en cas afirmatiu pinta la icona de la xarxa.

<?php
if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?><li class="et-social-icon et-social-twitter"><a href="/<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) );?>" class="icon"><span><?php esc_html_e( 'Twitter', 'Divi' );?></span></a></li>
<?php endif;?>

En el nostre cas no ens caldria posar aquest if perquè posarem directament la xarxa que ens interessa. 

La plantilla Divi ve amb 14 icones preconfigurades que son les següents:

.et-social-facebook a.icon:before { content: '\e093'; }
.et-social-twitter a.icon:before { content: '\e094'; }
.et-social-google-plus a.icon:before { content: '\e096'; }
.et-social-pinterest a.icon:before { content: '\e095'; }
.et-social-linkedin a.icon:before { content: '\e09d'; }
.et-social-tumblr a.icon:before { content: '\e097'; }
.et-social-instagram a.icon:before { content: '\e09a'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-myspace a.icon:before { content: '\e0a1'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }
.et-social-rss a.icon:before { content: '\e09e'; }

En el nostre cas volem afegir al nostre web el Linkedin, com ho farem?

Hem d’afegir al fitxer social_icons.php el següent codi

<li class="et-social-icon et-social-linkedin"><a href="/https://www.linkedin.com/company/arluk-software-s-l-" class="icon"><span><?php esc_html_e( 'Linkedin', 'Divi' );?></span></a></li>

Hem eliminat del principi

<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>

 i del final

<?php endif;?>

Hem modificat

<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) );?>

 per la URL del nostre Linkedin.

I l’últim canvi és modificar

et-social-twitter

 per 

et-social-linkedin

 

Altres entrades que et poden interessar

Conceptes bàsics del CSS que t’aniria bé conèixer si tens un web

Conceptes bàsics del CSS que t’aniria bé conèixer si tens un web

Fa uns dies et fèiem una primera aproximació a l’HTML però en aquest article t’explicarem els conceptes bàsics del CSS. L’avantatge de treballar amb un gestor de continguts com WordPress o Joomla és que no et calen coneixements de programació per...
Redirecció 301: què és i com es fa

Redirecció 301: què és i com es fa

Google, però també els usuaris i altres webs, poden tenir enllaços al nostre web però a vegades aquests enllaços deixen de ser vàlids perquè el nostre web està viu i evoluciona. Hem d’intentar evitar que en aquests casos ens aparegui l’error 404 que no...