WordPress wtyczki

W tym wpisie dowiesz się, jak zrobić oraz umieścić pływające okienko z linkami udostępniającymi na blogu WordPress oraz w szablonie Thesis Theme. Artykuł jest podzielony na 2 części – pierwsza część  pokazuje drogę na skróty, bez tłumaczenia po co, na co i dlaczego. Natomiast druga część opisuje krok po kroku, dlaczego taki kod a nie inny powinieneś wkleić tu, a nie tam itd.

1. Pływające okienko social mediów [wersja skrócona]

W pliku footer.php, przed tagiem kończącym footer zamieść poniższy kod:

<?php
// URL to share
if( is_singular() ) {
	$url = get_permalink();
	$text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
	if(is_category() ) {
		$cat = get_query_var('cat');
		$url = get_category_link($cat);
	} else {
		$tag = get_query_var('tag_id');
		$url = get_tag_link($tag);
	}
	$text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
	$url = get_bloginfo('url');
	$text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
?>

<div id="social-float">
	<div class="sf-twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWOJ_LOGIN" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>

	<div class="sf-facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=70&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
	</div>

	<div class="sf-plusone">
		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div><!-- /social-float -->

<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Show social voter only if the browser is wide enough.
		if( $(window).width() >= 1030 )
			$('#social-float').show();

		// Update when user resizes browser.
		$(window).resize(function() {
			if( $(window).width() < 1030 ) {
				$('#social-float').hide();
			} else {
				$('#social-float').show();
			}
		});
	});
</script>

Następnie w tym kodzie podmień TWOJ_LOGIN na swoją nazwę użytkownika z Twitter.com.

W pliku style.css dodajemy:

/**
 * Floating Social Buttons
 */

#social-float {
 position: fixed;
 left: 10px;
 bottom: 10px;

 width: 75px;
 padding: 10px 5px;
 text-align: center;

 background-color: #fff;

 border: 5px solid rgba(180, 180, 180, .7);
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

 display: none;
}

.sf-twitter {
 height: 62px;
 margin-bottom: 10px;
}

.sf-facebook {
 height: 60px;
 margin-bottom: 10px;
}

.sf-plusone {
 height: 60px;
}

Jeśli okienko nie pokazuje się poprawnie, możliwe, że nie masz aktywnego jQuery na blogu. Dlatego JEŚLI NIE DZIAŁA, musisz dodać poniższy kod w pliku functions.php lub header.php - przed tagiem wp_head();

<?php wp_enqueue_script('jquery'); ?>

Aby dowiedzieć się więcej szczegółów na temat ruchomego okienka, przeczytaj dokładny tutorial na moim blogu: http://netbloger.eu