WordPress: Social Media Buttons in Footer-Leiste integrieren

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

Vorgehen

Design -> Widgets -> Footer Widget 1 und dann als Blocktyp Individuelles HTML

<a href="https://www.linkedin.com/company/14795319" target="_blank">
<img style="width: 40px; height: 40px;" src="/images/LinkedIn 32px.gif" alt="linkedin-button" />
</a>

Deprecated

Folgendes Vorgehen hat mir bei einem größeren WordPress-Update (inkl. Templates) den Social-Media-Icon-Footer gelöscht und ist daher keine gute Lösung:

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:

	&amp;amp;amp;amp;lt;?php
	endif;
	do_action('generate_after_footer_widgets');
	?&amp;amp;amp;amp;gt;

und

&amp;amp;amp;amp;lt;!-- .site-info --&amp;amp;amp;amp;gt;
	&amp;amp;amp;amp;lt;?php do_action( 'generate_after_footer_content' ); ?&amp;amp;amp;amp;gt;

folgendes Codesnippet ein

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

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.