انجمن عمومی گسترش فناوری آگو
آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس - نسخه‌ی قابل چاپ

+- انجمن عمومی گسترش فناوری آگو (http://forums.ago.ir)
+-- انجمن: انجمن های عمومی گسترش فناوری آگو (/forumdisplay.php?fid=1)
+--- انجمن: برنامه نویسی (/forumdisplay.php?fid=13)
+--- موضوع: آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس (/showthread.php?tid=2331)

آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس - agotd - 02-06-2014 02:58 PM

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

کد 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 رو فعال میکنیم.

[تصویر: active-plugin.png]

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

کد php:
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 سایت اجرا میشه.
پس در ادامه کدهای زیر رو قرار میدیم :

کد php:
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>
    ';
} 

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

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