pedia-learning

ورود

گذرواژه‌تان را فراموش کرده‌اید؟

ثبت نام

ثبت نام
انجمن عمومی گسترش فناوری آگو

اگر اولین بار از انجمن بازدید می کنید برای دسترسی کامل به انجمن عضو شوید بعد عضویت قادر به ارسال مطلب و شرکت در بحث خواهید داشت

ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس
02-06-2014, 02:58 PM
ارسال: #1
آموزش ساخت پلاگین اضافه کردن دکمه گوگل پلاس به وردپرس
بعد از چند وقت تصمیم گرفتم یه آموزش در مورد ساخت پلاگین در وردپرس بنویسم.پلاگینی که در این قسمت قراره باهم بنویسیم پلاگین اضافه کردن دکمه گوگل پلاس به سایته. مثل همین چیزی که الان پایین سایت میبینید.
برای این کار ابتدا یه پوشه جدید در مسیر 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>
    '
;


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

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


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان


Persian Translation by MyBBIran.com - Ver: 4.1
Powered by MyBB, © 2002-2024 MyBB Group.
Theme designed by Marvel (Sidebar created by Yaldaram - Yaldaram.com)
Theme Translation by Mt Edition