Uvod
Ako ste se do sada već susreli sa WordPress-om, onda znate da u WordPress repozitorijumu možete pronaći gomilu plugin-ova, koje samo skinete, instalirate i završite posao. Ali zašto ne biste napravili svoj plugin? Ovaj tutorijal će vam pokazati osnovne korake kako da sami napravite Bootstrap Social Sharing Plugin za WordPress.
Videćete da nije toliko teško, čak i ako ste potpuni početnik. Biće vam potrebno samo osnovno znanje iz PHP-a, MYSQL-a, HTML-a, CSS-a and jQuery-ja.
Korak 1: Kreiranje direktorijuma i fjalova za Bootstrap Social Sharing Plugin
Pre nego što počnemo, neophodno je da proverite da li ste se uspešno povezali sa Bootstrap CDN-om ili ugradili Bootstrap fajlove u vašoj WordPress temi. U slučaju da ne znate kako to da uradite, ne brinite ovaj tutorijal će vam pomoći.
Pre svega pronađite WordPress plugins folder (uglavnom se nalazi na stazi:/wp-content/plugins). Zatim kreirajte direktorijum bs-social-share (naziv plugin-a je proizvoljan) i sledeće fajlove u njemu:
bs-social-share bs-social-share.php style.css
Otvorite bs-social-share.php fajl i kopirajte sledeće informacije (omogućavanje instaliranja plugin-a):
<?php /* Plugin Name: Your Plugin Name Plugin URI: http://your-plugin.com Description: Your Plugin Description Version: 1.0.0 Author: Your Name Author URI: http://your-website.com License: GPL */ ?>
Korak 2: Kreiranje Admin Menu Item-a
Kada se kreira plugin korisnik mora biti u mogućnosti da odabere koje to dugmiće za deljenje na društvenim mrežama želi da prikaže. Kako bismo to omogućili, moramo da kreiramo options page, ali pre svega ćemo napraviti menu item u okviru kog će se options page i prikazivati (detaljna objašnjenja):
add_action("admin_menu", "bs_social_share_menu_item");
function social_share_menu_item() {
add_submenu_page("options-general.php", "Bootstrap Social Share", " Bootstrap Social Share", "manage_options", "bootstrap-social-share", "bs_social_share_page");
}
Menu item dodajemo unutar admin_menu action-a koristećiadd_submenu_page. Sadržaj options stranice biće prikazan uz pomoć bs_social_share_page callback funkcije.
Korak 3: Kreiranje Bootstrap Social Sharing Options stranice
U suštini to postižemo dodavanjem bs_social_share_config_section i registrovanjem podešavanja kao bs-social-share:
function bs_social_share_page() {
?>
<div class="">
<h1> Bootstrap Social Sharing Options</h1>
<form method="post" action="options.php">
<?php
settings_fields("bs_social_share_config_section");
do_settings_sections("bs-social-share");
submit_button();
?>
</form>
</div>
<?php
}
Korak 4: Prikazivanje option polja
Kroz bs_social_share_settings funkciju korisnici će biti u mogućnosti da prakižu Facebook, Twitter, LinkedIn i GPlus share dugmiće/linkove (listu dugmića za deljenje na društvenim mrežama možete proširiti po želji):
add_action("admin_init", "bs_social_share_settings");
function bs_social_share_settings() {
add_settings_section("bs_social_share_config_section", "", null, "social-share");
add_settings_field("bs-social-share-facebook", "Display Facebook share button?", "bs_social_share_facebook_checkbox", "bs-social-share", "bs_social_share_config_section");
add_settings_field("bs-social-share-twitter", "Display Twitter share button?", "bs_social_share_twitter_checkbox", "bs-social-share", "bs_social_share_config_section");
add_settings_field("bs-social-share-linkedin", "Display LinkedIn share button?", "bs_social_share_linkedin_checkbox", "bs-social-share", "bs_social_share_config_section");
add_settings_field("bs-social-share-googleplus", "Display GPlus share button?", "bs_social_share_googleplus_checkbox", "bs-social-share", "bs_social_share_config_section");
register_setting("bs_social_share_config_section", "bs-social-share-facebook");
register_setting("bs_social_share_config_section", "bs-social-share-twitter");
register_setting("bs_social_share_config_section", "bs-social-share-linkedin");
register_setting("bs_social_share_config_section", "bs-social-share-googleplus");
}
function bs_social_share_facebook_checkbox() {
?>
<input type="checkbox" name="bs-social-share-facebook" value="1" <?php checked(1, get_option('bs-social-share-facebook'), true); ?> >
<?php
}
function bs_social_share_twitter_checkbox() {
?>
<input type="checkbox" name="bs-social-share-twitter" value="1" <?php checked(1, get_option('bs-social-share-twitter'), true); ?> >
<?php
}
function bs_social_share_linkedin_checkbox() {
?>
<input type="checkbox" name="bs-social-share-linkedin" value="1" <?php checked(1, get_option('bs-social-share-linkedin'), true); ?> >
<?php
}
function bs_social_share_googleplus_checkbox() {
?>
<input type="checkbox" name="bs-social-share-googleplus" value="1" <?php checked(1, get_option('bs-social-share-googleplus'), true); ?> >
<?php
}
Options stranica bi trebalo da izgleda ovako:
Korak 5: Prikazivanje Bootstrap Social Sharing Plugin dugmića
U našem primeru za deljenje ćemo upotrebiti linkove i biće prikazani nakon svakog post-a, a vi ih možete prikazati po želji. Da bismo to uradili, neophodno je da iskoristimo the_content filter.
add_filter("the_content", "add_bs_social_share_lins");
function add_social_share_icons($content) {
$html = "<div class='row social-share-wrapper'><div class='col-12 mt-3 mb-3'>";
global $post;
$url = get_permalink($post->ID);
$url = esc_url($url);
if(get_option("bs-social-share-facebook") == 1) {
$html = $html . '<a class="facebook btn btn-outline-primary p-2 m-2" href='http://www.facebook.com/sharer.php?u=" . $url . "'><i class="fab fa-facebook-f"></i> Facebook</a>';
}
if(get_option("bs-social-share-twitter") == 1) {
$html = $html . "<a class='twitter btn btn-info-primary p-2 m-2' href='https://twitter.com/share?url=" . $url . "'><i class='fab fa-twitter'></i> Twitter</a>";
}
if(get_option("bs-social-share-linkedin") == 1) {
$html = $html . "<a class='linkedin btn btn-outline-primary p-2 mr-2' href='https://www.linkedin.com/shareArticle?url=" . $url . "'><i class='fab fa-linkedin-in'></i> LinkedIn</a>";
}
if(get_option("bs-social-share-googleplus") == 1) {
$html = $html . "<a class='googleplus btn btn-outline-danger p-2 mr-2' target='_blank' href='https://plusone.google.com/_/+1/confirm?hl=en&url=$url'><i class='fab fa-google-plus-g'></i> GPlus</a>";
}
$html = $html . "<div class='clear'></div></div></div>";
return $content = $content . $html;
}
Stilizovanje Bootstrap Social Sharing Plugin linkova
Ukoliko želite možete dodatno stilizovati linkove/dugmiće uključivanjem style.css fajl:
add_action("wp_enqueue_scripts", "bs_social_share_style");
function social_share_style() {
if (is_single() ) {
wp_register_style("social-share-style-file", plugin_dir_url(__FILE__) . "style.css");
wp_enqueue_style("social-share-style-file");
wp_register_script('custom-script', plugins_url( 'custom.js', __FILE__ ), array( 'jquery' ));
wp_enqueue_script( 'custom-script' );
}
}
Kao što možete videti iznad, uključili smo i custom.js fajl. Slobodno dodajte neki custom JQuery kod, prema vašim potrebama .
To je to! Upravo ste kreirali svoj Bootstrap Social Sharing Plugin. Nemojte stati ovde, dodajte nove opcije, nastavite sa eksperimentisanjem…
