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

جولای 14, 2012 توسط : سعید

بعد از چند وقت تصمیم گرفتم یه آموزش در مورد ساخت پلاگین در وردپرس بنویسم.پلاگینی که در این قسمت قراره باهم بنویسیم پلاگین اضافه کردن دکمه گوگل پلاس به سایته. مثل همین چیزی که الان پایین سایت میبینید.
برای این کار ابتدا یه پوشه جدید در مسیر 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
جولای 20, 2012 @ 9:04 ب.ظ

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

پاسخ
نوامبر 16, 2012 @ 3:44 ق.ظ

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

پاسخ
Parham
دسامبر 7, 2012 @ 2:16 ب.ظ

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

پاسخ
محسن
دسامبر 15, 2012 @ 1:05 ق.ظ

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

پاسخ
آگوست 23, 2013 @ 3:26 ق.ظ

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

پاسخ
اکتبر 21, 2013 @ 12:58 ب.ظ

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

پاسخ
نوامبر 27, 2013 @ 1:35 ب.ظ

ممنون

پاسخ
ژوئن 4, 2014 @ 4:58 ب.ظ

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

پاسخ
علی
نوامبر 20, 2014 @ 2:08 ق.ظ

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

پاسخ
    Saeed Moqadam
    دسامبر 15, 2014 @ 9:16 ب.ظ

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

    پاسخ
دسامبر 14, 2014 @ 6:56 ب.ظ

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

پاسخ
    Saeed Moqadam
    دسامبر 15, 2014 @ 9:07 ب.ظ

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

    پاسخ

دیدگاهتان را بنویسید

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


*