آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس

تیر ۲۴, ۱۳۹۱ توسط : سعید

بعد از چند وقت تصمیم گرفتم یه آموزش در مورد ساخت پلاگین در وردپرس بنویسم.پلاگینی که در این قسمت قراره باهم بنویسیم پلاگین اضافه کردن دکمه گوگل پلاس به سایته. مثل همین چیزی که الان پایین سایت میبینید.
برای این کار ابتدا یه پوشه جدید در مسیر wp-content/plugins با نام googleplusPro میسازیم. اسم این پوشه رو میتونید هر چی دوست داشتید بذارید اما در طول آموزش از اسامی که میگم پیروی کنید.
داخل این پوشه یه فایل با نام index.php میسازیم. فایل رو باز کرده و محتویات زیر رو داخلش مینویسیم :

<?php
/*
Plugin Name: Google+ Pro
Plugin URI: http://phpro.ir/wordpress/googlepluspro/
Description: پلاگین اضافه کردن دکمه گوگل پلاس به سایت
Author:  سعید مقدم زاده 
Version: 1.0
Author URI: http://phpro.ir
*/

قسمتهای بالا رو یکی یکی براتون توضیح میدم :
Plugin Name : نام پلاگین که توی قسمت افزونه های وردپرس نمایش داده میشه.
Plugin URI : صفحه شخصی مربوط به پلاگینه که معمولا آموزشها و مستندات پلاگین داخلش قرار میگیره.
Description: یه توضیح کوتاه در مورد پلاگین
Author: نام نویسنده پلاگین
Version : نسخه پلاگین
Author URI : صفحه وب مربوط به نویسنده پلاگین

هر پلاگینی که از این به بعد خواستید بنویسید باید موارد بالا رو در ابتدای فایل اصلی پلاگین قرار بدید.
حالا به قسمت افزونه در منوی ادمین میریم و افزونه Google+ Pro رو فعال میکنیم.

میریم سر اصل مطلب که نوشتن پلاگینه.
اول باید ببینیم این پلاگین قراره چه کاری برای ما انجام بده.
این پلاگین وردپرس قراره در گوشه پایین سمت چپ سایت یه دکمه گوگل پلاس نمایش بده که با اسکرول کردن صفحه از جاش تکون نخوره.
پلاگین رو باید از طریق css بهش استایل بدیم. پس استایل باید بین تگ head قرار بگیره.بقیه کدهای مربوط به نمایش دکمه گوگل پلاس رو در footer قرار میدیم.(شما هر جا خواستید قرار بدید)
برای این که استایل مربوط رو در قسمت head سایت قرار بدیم از کد زیر استفاده میکنیم :

add_filter('wp_head' , 'addplusonestyle');
function addplusonestyle()
{
	echo  '
			<style>
				#plusone
				{
					text-align:center;
					padding:10px;
					background:#EEEEEE;
					left:0px;
					bottom: 0px;
					position:fixed;
					border:1px solid #CCC;
				}
			</style>';	
}

تابع add_filter یه تابع توکار وردپرسه.کارش هم اینه که میتوینم قسمتهای مختلف وردپرس رو کم و زیاد کنیم.مثلا با این تابع میتونیم به انتهای هر پست چیزی اضافه کنیم یا به قسمت header سایت و همچنین footer
اگر به فایل header.php قالبتون نگاه کنید میبینید که تابع ()wp_head داخل تگ head فراخوانی شده.ما با استفاده از تابع add_filter استایل مورد نظرمون رو به wp_head اضافه کردیم.با اینکار استایل ما بین تگ head نمایش داده میشه.
پارامتر دوم تابع add_filter نام تابعیه که ما مینویسیم. در این مثال اسم تابع ما addplusonestyle . داخل تابه ‘addplusonestyle’ ما کدهای مربوط به استایل پلاگین رو echo کردیم.
برای اضافه کردن دکمه گوگل پلاس به footer هم باید از روش بالا استفاده کنیم.با این تفاوت که به جای تابع wp_head باید از تابع wp_footer استفاده کنیم. همینوطور که فهمیدید تابع wp_footer در قسمت footer سایت اجرا میشه.
پس در ادامه کدهای زیر رو قرار میدیم :

add_filter('wp_footer' , 'addplusone');
function addplusone()
{
	echo
	'
	<div id="plusone">
اگه از مطالب سایت خوشتون اومد یک پلاس هدیه کنید  <br><br>
<!-- Place this tag where you want the +1 button to render   annotation="inline" -->
<g:plusone href="'.get_option('home').'"></g:plusone>
</div>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  window.___gcfg = {lang: \'fa\'};
  (function() {
    var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;
    po.src = \'https://apis.google.com/js/plusone.js\';
    var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
	';
}

نگران کدهای جاوا اسکریپت نباشید. این کدی هست که خود گوگل به ما میده.
خب با اضافه کردن کدهای بالا میتونیم نتیجه رو در سایت مشاهده کنیم .

به امید خدا در آینده ای نزدیک با استفاده از ارتقای همین پلاگین با بقیه قسمتهای ساخت پلاگین هم آشنا میشم.
فکر نکنم دیگه نیازی باشه بگم اگر سوالی داشتید در قسمت نظرات بپرسید.نظرتون رو هم بگید.
صفحه دانلود پلاگین
موفق باشید

بازدید : ۶۵۲۲

Hamid
تیر ۳۰, ۱۳۹۱ @ ۹:۰۴ ب.ظ

کارتون عالیه
ما منتظریم

پاسخ دادن
آبان ۲۶, ۱۳۹۱ @ ۳:۴۴ ق.ظ

با سلام
نیازی نیست در قسمت کد ها آی دی گوگل پلاسمون رو وارد کنیم؟

پاسخ دادن
Parham
آذر ۱۷, ۱۳۹۱ @ ۲:۱۶ ب.ظ

نمیشه تو پلاگین از jquery استفاده کنیم ؟ میشه یه اموزش بذارید ؟

پاسخ دادن
محسن
آذر ۲۵, ۱۳۹۱ @ ۱:۰۵ ق.ظ

با سلام اگه ممکنه آموزش اضافه کردن دکمه لایک فیس بوک رو هم بگذارید البته نه با iframe به صورت کد
چون iframe دیگه منسوخ شده
من لینکی که خود فیس بوک گذاشته بود رو دیدم مراحلش هم طی کردم
بازم به مشکل خوردم
اگه ممکنه این آموزش رو آماده کنید چون هیچ سورس فارسی برای این کار نیست
http://developers.facebook.com/docs/reference/plugins/like/

پاسخ دادن
شهریور ۱, ۱۳۹۲ @ ۳:۲۶ ق.ظ

خیلی مفید بود برا من این پستتون

پاسخ دادن
مهر ۲۹, ۱۳۹۲ @ ۱۲:۵۸ ب.ظ

آقا یعنی دستتون درد نکنه ها

پاسخ دادن
آذر ۶, ۱۳۹۲ @ ۱:۳۵ ب.ظ

ممنون

پاسخ دادن
خرداد ۱۴, ۱۳۹۳ @ ۴:۵۸ ب.ظ

سلام
داداش چه طور این عکسرو سنتر کنیم؟
نه کلشو فقط خوده عکسه

پاسخ دادن
علی
آبان ۲۹, ۱۳۹۳ @ ۲:۰۸ ق.ظ

سلام
آموزش خوبی بود.
ممنون میشم اگر نحوه ساخت صفحه مدیریت برای یه پلاگین رو هم توضیح بدین.

پاسخ دادن
    Saeed Moqadam
    آذر ۲۴, ۱۳۹۳ @ ۹:۱۶ ب.ظ

    سلام.خواهش میکنم.چشم 🙂

    پاسخ دادن
آذر ۲۳, ۱۳۹۳ @ ۶:۵۶ ب.ظ

با سلام
نیازی نیست در قسمت کد ها آی دی گوگل پلاسمون رو وارد کنیم؟

پاسخ دادن
    Saeed Moqadam
    آذر ۲۴, ۱۳۹۳ @ ۹:۰۷ ب.ظ

    نه نیازی نیست. این دکمه به سایت شما پلاس میده نه به پروفایل گوگل پلاستون

    پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*