WordPress: Social Media Buttons in Footer-Leiste integrieren

So sollen die Social Media Buttons in der Footer-Leiste aussehen:

Man lege die Icons in passender Größe in einen /image-Ordner.

Ich habe das Theme „Forefront“, welches auf dem Theme „GeneratePress“ aufbaut. In Design -> Editor gehe ich auf „GeneratePress“ in der dropdownbox und anschließend wähle ich footer.php. Dort füge ich zwischen:

	<?php
	endif;
	do_action('generate_after_footer_widgets');
	?>

und

<!-- .site-info -->
	<?php do_action( 'generate_after_footer_content' ); ?>

folgendes Codesnippet ein

	<footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope">
		<div id="social_media">
			<a href="https://www.facebook.com/projektfisch" target="_blank">
				<img src="/images/projekt-fisch-facebook.svg" alt="projekt-fisch-facebook-button" style="width:40px;height:40px;"/>
			</a>
			<a href="https://twitter.com/ProjektFisch" target="_blank">
				<img src="/images/projekt-fisch-twitter.svg" alt="projekt-fisch-twitter-button" style="width:40px;height:40px;"/>
			</a>
			<a href="https://plus.google.com/111580706390601723057" target="_blank">
				<img src="/images/projekt-fisch-google.svg" alt="projekt-fisch-google+-button" style="width:40px;height:40px;"/>
			</a>
			<a href="https://www.xing.com/profile/Michael_Wowro" target="_blank">
				<img src="/images/projekt-fisch-xing.svg" alt="projekt-fisch-xing-button" style="width:40px;height:40px;"/>
			</a>
			<a href="http://www.it-freelancer-magazin.de/index.php/feed/" target="_blank">
				<img src="/images/projekt-fisch-rss.svg" alt="projekt-fisch-rss-button" style="width:40px;height:40px;"/>
			</a>
		</div>
		<div class="inside-site-info grid-container grid-parent">
			<?php do_action( 'generate_credits' ); ?>
		</div>
	</footer>

Wer sich das Ganze in live anschauen möchte, kann sich mal den Footer des IT Freelancer Magazins anschauen.

Veröffentlicht von

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.