如何在php标记中的'a'元素中添加一个类

Question

I'm struggling with something pretty simple here and wondered if someone can help as I only have a basic knowledge of code.

I've purchased a wordpress theme and am making some changes. I'd like to set individual colours for the social media icons. In order to do this, this is the advice from the theme developer:

To change the color individually, you need to add a class to the "a" element in the markup. In 'widget-social.php' the section between the line 64 and the line 139. Add a class ("facebook", "twitter", etc) to each element and use something like:

html .lol-social-widget li a.facebook {
background-color: #fff;
color: #000;
}

Here's the code from the widget-social.php:

<div class="lol-social-widget">            
<ul>
<?php if ( $facebook != '' ) : ?>
<li><a href="<?php echo esc_url( $facebook ); ?>" <?php echo $target; ?>><i class="fa fa-facebook"></i></a></li>
<?php endif; ?>
<?php if ( $twitter != '' ) : ?>
<li><a href="<?php echo esc_url( $twitter ); ?>" <?php echo $target; ?>><i class="fa fa-twitter"></i></a></li>
<?php endif; ?>

I've included just the facebook and twitter elements here.

Is anyone able to offer advice as to how I modify the php file to include the 'a' element?

Thanks in advance for any help!

Answer 1

You have to add the class inside the anchor tag as below.

<div class="lol-social-widget">            
<ul>
<?php if ( $facebook != '' ) : ?>
<li><a class="facebook" href="<?php echo esc_url( $facebook ); ?>" <?php echo $target; ?>><i class="fa fa-facebook"></i></a></li>
<?php endif; ?>
<?php if ( $twitter != '' ) : ?>
<li><a class="twitter" href="<?php echo esc_url( $twitter ); ?>" <?php echo $target; ?>><i class="fa fa-twitter"></i></a></li>
<?php endif; ?>

Then update the style.css with the following styles.

html .lol-social-widget li a.twitter{
background-color: #f00; //add the required color for twitter icon.
color: #000;
}
html .lol-social-widget li a.facebook {
background-color: #00f; //add the required color for facebook icon.
color: #000;
}

Then you will have red background color for twitter icon and blue for facebook icon. You can change the color to whatever color you need.