صفحة التنبيه و الروابط الخارجية واستخدامها في المدونة – YourColor
السلام عليكم ورحمة الله وبركاته
بينما اتجول في المنتديات لاحظت عند الضغط على بعض الروابط إما تحولك لصفحة تنبيه بأنك تغادر الموقع أو أن تنتظر حتى يتم عرض الرابط فأعجبتني الفكرة لكون هذه الصفحات لها دورين مهمين الدور الأول أنها تنبهك بأنك تغادر الموقع وأنها غير مسؤولة عن محتوى الموقع الذي أنت ذاهب اليه , أما الدور الثاني هو عرض اعلانات وهذا هو الاستغلال
وهذه الفكرة تحتاج برمجة اضافة وبعد بحث طويل في موقع ووردبريس وجدت هذه الاضافة WP Js External Link Info تقوم هذه الاضافة باعادة انشاء الروابط الخارجية وتوجيهها في التدوينات بصفحة خاصة تحتوي على معلومات المغادرة من الموقع و الاضافة تحتوي على صفحة عادية جدا, مثال لصفحة مغادرة المدونة
كما تلاحظون الصفحة بسيطة جدا لهذا سوف نقوم بعمل قالب لصفحة المغادرة لتناسب الموقع
اولا تنصيب الاضافة :
- نقوم بتحميل الاضافة من موقع لووردبريس من هنا
- قم فك الضغط عن الاضافة
- قم برفعها الى مجلد الاضافات هكذا : wp-content/plugins/wp-js-external-link-info
- بعد ذالك قم بتفعيلها من : لوحة التحكم > الإضافات > wp-js-external-link-info > تفعيل
الاضافة تحتوي 5 ملفات وهي :
js-external-link-info-de_DE.mojs-external-link-info-de_DE.poreadme.txtredirect.phpwp-js-external-link-info.php
الملف الذي يهما هو redirect.php سوف نقوم باستعمال بعض الاكواد منه
الان سوف نتحدث عن طريقة إنشاء قالب لصفحة مستقلة قم بانشاء ملف فارغ باسم redirection.php او ما تشاء وافتحه باي محرر انا استعمل notepad + ولا تنسى الترميز (UTF-8) كي لا تواجهك مشكلة في الرموز عند ادخال كلمات باللغة العربية
اول خطوة نقوم بادراج الكود التالي :
<?php /* Template Name: Redirect Page */ ?>
هنا نضع اسم قالب الصفحة كي يتعرف عليها الووردبريس ضروري اضافتها , سوف نتطرق لها لاحقا
تاني خطوة نفتح ملف الاضافة redirect.php وننسخ الكود التالي :
$url = $_GET[´url´];
$blog = urldecode($_GET[´blog´]);
if ($blog == "") { $blog = "this Blog"; }
وندرجه مباشرة اسفل الكود السابق فيصبح الكود هكذا :
<?php
/*
Template Name: Redirect Page
*/
?>
<?php
$url = $_GET[´url´];
$blog = urldecode($_GET[´blog´]);
if ($blog == "") { $blog = "this Blog"; }
?>
الان سوف نحتاج كود الترويسة (header.php) لاننا سنقوم بتعديله , قم بفتح ملف header.php وإنسخ الكود كامل وقم بلصقه مباشرة اسفل الاكواد السابقة اولا قبل ان أضع الكود سوف نأخد هذا القالب لتطبيق عليه Cyangant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo(´html_type´); ?>; charset=<?php bloginfo(´charset´); ?>" />
<meta name="description" content="<?php bloginfo(´name´); ?> - <?php bloginfo(´description´); ?>" />
<title><?php wp_title(´´); ?><?php if(wp_title(´ ´, false)) { echo ´ – ´; } ?> <?php bloginfo(´name´); ?> – <?php bloginfo(´description´); ?></title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(´name´); ?> RSS Feed" href="<?php bloginfo(´rss2_url´); ?>" />
<link rel="pingback" href="<?php bloginfo(´pingback_url´); ?>" />
<link rel="shortcut icon" href="<?php bloginfo(´stylesheet_directory´); ?>/images/favicon.gif"/>
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_url´); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_directory´); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" type="text/css" />
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.flow.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/script.js"></script>
<?php require(´wp-lightboxJS/wp-lightboxJS.php´); ?>
<?php if ( is_singular() ) wp_enqueue_script( ´comment-reply´ ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<ul id="top-menu">
<li <?php if (is_home()){ echo "class="current_page_item"";} ?>><a href="<?php echo get_option(´home´); ?>">الصفحة الرئيسية</a></li>
<?php wp_list_pages(´title_li´); ?>
</ul>
<div id="header">
<h1><a href="<?php echo get_option(´home´); ?>/" class="header-title"><?php bloginfo(´name´); ?></a></h1>
<div class="description"><?php bloginfo(´description´); ?></div>
</div><!-- END Header -->
لاحظ معي يجب تعديل هذا السطر من
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Type" content="<?php bloginfo(´html_type´); ?>; charset=<?php bloginfo(´charset´); ?>" />
الى
<meta http-equiv="refresh" content="10; url=<?php echo $url; ?>">
نقوم بتغيره حتى يتم تحويلك بعد مرور الوقت المحدد
يمكنك تغير وقت الذي سيتم فيه تحويل الزائر الى الموقع الخارجي فقط قم بتغير رقم 10 الى الرقم الذي تريد والوقت هنا بالثواني
فيصبح الكود بالشكل التالي :
<?php
/*
Template Name: Redirect Page
*/
?>
<?php
header(´Content-Type:text/html; charset=UTF-8´);
$url = $_GET[´url´];
$blog = urldecode($_GET[´blog´]);
if ($blog == "") { $blog = "this Blog"; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="refresh" content="10; url=<?php echo $url; ?>">
<meta name="description" content="<?php bloginfo(´name´); ?> - <?php bloginfo(´description´); ?>" />
<title><?php wp_title(´´); ?><?php if(wp_title(´ ´, false)) { echo ´ – ´; } ?> <?php bloginfo(´name´); ?> – <?php bloginfo(´description´); ?></title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(´name´); ?> RSS Feed" href="<?php bloginfo(´rss2_url´); ?>" />
<link rel="pingback" href="<?php bloginfo(´pingback_url´); ?>" />
<link rel="shortcut icon" href="<?php bloginfo(´stylesheet_directory´); ?>/images/favicon.gif"/>
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_url´); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_directory´); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" type="text/css" />
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.flow.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/script.js"></script>
<?php require(´wp-lightboxJS/wp-lightboxJS.php´); ?>
<?php if ( is_singular() ) wp_enqueue_script( ´comment-reply´ ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<ul id="top-menu">
<li <?php if (is_home()){ echo "class="current_page_item"";} ?>><a href="<?php echo get_option(´home´); ?>">الصفحة الرئيسية</a></li>
<?php wp_list_pages(´title_li´); ?>
</ul>
<div id="header">
<h1><a href="<?php echo get_option(´home´); ?>/" class="header-title"><?php bloginfo(´name´); ?></a></h1>
<div class="description"><?php bloginfo(´description´); ?></div>
</div><!-- END Header -->
الان يجب معرفة الوسوم المستعملة التدوينات او الصفحات المنفردة حتى تأخد صفحة التحويل شكل المدونة
نأخد طريقة سهلة نفتح ملف single.php ونستخرج الاوسمة التي نحتاجها او استعمل موديل الفيرفوكس firebug , وهذه الاكواد التي حصلنا عليها من القالب الذي نطبق عليه الشرح
<div id="content"> <div class="post" id=""> <div class="post-text"> <h2 class="post-title"></h2> هنا سوف نضع الرسالة التي نريد والاعلانات </div> </div> </div>
وهذه الرسالة قمت بترجمتها مع وضع صورة يمكنك تغيرها على جسب ما تريد
<div id="content"> <div class="post" id=""> <div class="post-text"> <h2 class="post-title">أنت الان تغادر المدونة</h2> <p style="text-align: center;"><img class="aligncenter" src="http://img163.imageshack.us/img163/6784/1291276521warning48.png" alt="" /></p> <p style="text-align: center;font-size:15px;"> ملاحظة : قمت بالضغظ على رابط خارجي وستقوم بمغادرة مدونة <b><?php echo $blog; ?></b>.<br> <br> الصفحات التالية ليست جزئا من <b><?php echo $blog; ?></b>!<br> <br> <br> <br></p> <p style="text-align: center;font-size:15px;"> نحن لسنا مسؤولين عن محتوى هذه الصفحة. إذا لم يتم إعادة توجيهك تلقائيا ، الرجاء انقر <a href="<?php echo $url; ?>">هنا</a>.<br> </p> </div> </div> </div>
بالنسبة للاستغلال يمكن وضع الاعلانات بين جمل الرسالة هكذا :
<div id="content"> <div class="post" id=""> <div class="post-text"> <h2 class="post-title">أنت الان تغادر المدونة</h2> <p style="text-align: center;"><img class="aligncenter" src="http://img163.imageshack.us/img163/6784/1291276521warning48.png" alt="" /></p> <p style="text-align: center;font-size:15px;"> ملاحظة : قمت بالضغظ على رابط خارجي وستقوم بمغادرة مدونة <b><?php echo $blog; ?></b>.<br> <script type="text/javascript"><!-- google_ad_client = "pub-6138943747262727"; /* 468x60, تم إنشاؤها 08/09/10 */ google_ad_slot = "7095575573"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <br> الصفحات التالية ليست جزئا من <b><?php echo $blog; ?></b>!<br> <div style=”display:block;float:right;margin: 5px 5px 5px 5px;”><script type="text/javascript"><!-- google_ad_client = "pub-6138943747262727"; /* 250x250, wpportal */ google_ad_slot = "9012847538"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div style=”display:block;float:left;margin: 5px 5px 5px 5px;”> <script type="text/javascript"><!-- google_ad_client = "pub-6138943747262727"; /* 300x250, تم إنشاؤها 18/11/10 */ google_ad_slot = "0848147718"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <br> <br> <br></p> <p style="text-align: center;font-size:15px;"> نحن لسنا مسؤولين عن محتوى هذه الصفحة. إذا لم يتم إعادة توجيهك تلقائيا ، الرجاء انقر <a href="<?php echo $url; ?>">هنا</a>.<br> </p> </div> </div> </div>
ينقصنا الان استدعاء القائمة الجانبية وأسفل الصفحة نقوم باستدعائهما بالشكل التالي :
<?php get_sidebar(); ?> <?php get_footer(); ?>
وهذا الشكل الاخير لقالب الصفحة التي نشتغل عليها
<?php
/*
Template Name: Redirect Page
*/
?>
<?php
$url = $_GET[´url´];
$blog = urldecode($_GET[´blog´]);
if ($blog == "") { $blog = "this Blog"; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="refresh" content="10; url=<?php echo $url; ?>">
<meta name="description" content="<?php bloginfo(´name´); ?> - <?php bloginfo(´description´); ?>" />
<title><?php wp_title(´´); ?><?php if(wp_title(´ ´, false)) { echo ´ – ´; } ?> <?php bloginfo(´name´); ?> – <?php bloginfo(´description´); ?></title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(´name´); ?> RSS Feed" href="<?php bloginfo(´rss2_url´); ?>" />
<link rel="pingback" href="<?php bloginfo(´pingback_url´); ?>" />
<link rel="shortcut icon" href="<?php bloginfo(´stylesheet_directory´); ?>/images/favicon.gif"/>
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_url´); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo(´stylesheet_directory´); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" type="text/css" />
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/jquery.flow.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php bloginfo(´template_url´); ?>/js/script.js"></script>
<?php require(´wp-lightboxJS/wp-lightboxJS.php´); ?>
<?php if ( is_singular() ) wp_enqueue_script( ´comment-reply´ ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<ul id="top-menu">
<li <?php if (is_home()){ echo "class="current_page_item"";} ?>><a href="<?php echo get_option(´home´); ?>">الصفحة الرئيسية</a></li>
<?php wp_list_pages(´title_li´); ?>
</ul>
<div id="header">
<h1><a href="<?php echo get_option(´home´); ?>/" class="header-title"><?php bloginfo(´name´); ?></a></h1>
<div class="description"><?php bloginfo(´description´); ?></div>
</div><!-- END Header -->
<div id="content">
<div class="post" id="">
<div class="post-text">
<h2 class="post-title">أنت الان تغادر المدونة</h2>
<p style="text-align: center;"><img class="aligncenter" src="http://img163.imageshack.us/img163/6784/1291276521warning48.png" alt="" /></p>
<p style="text-align: center;font-size:15px;">
ملاحظة : قمت بالضغظ على رابط خارجي وستقوم بمغادرة مدونة <b><?php echo $blog; ?></b>.<br>
<script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 468x60, تم إنشاؤها 08/09/10 */
google_ad_slot = "7095575573";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br>
الصفحات التالية ليست جزئا من <b><?php echo $blog; ?></b>!<br>
<div style=”display:block;float:right;margin: 5px 5px 5px 5px;”><script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 250x250, wpportal */
google_ad_slot = "9012847538";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style=”display:block;float:left;margin: 5px 5px 5px 5px;”>
<script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 300x250, تم إنشاؤها 18/11/10 */
google_ad_slot = "0848147718";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>
<br>
<br></p>
<p style="text-align: center;font-size:15px;">
نحن لسنا مسؤولين عن محتوى هذه الصفحة. إذا لم يتم إعادة توجيهك تلقائيا ، الرجاء انقر <a href="<?php echo $url; ?>">هنا</a>.<br>
</p>
</div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
نقوم بحفظ الملف redirection.php ورفعه الى مجلد القالب الذي تستعمله
/wp-content/themes/your-theme-name/redirection.php
الان نتوجه الى لوحة التحكم لإضافة صفحة جديدة
قم بنشر الصفحة الان يجب اضافة الصفحة للاضافة نقوم بالتالي :
من لوحة التحكم > الاعدادات > WP Js External Link Info
وهذا مثال للعمل الذي قمنا به :
والسلام عليكم ورحمة الله وبركاته
التغذية
تويتر
فيسبوك
يوتيوب
الاكاديمية العربية لفنون التصميم و تعليم الجرافيك 
يجب عليك تسجيل الدخول لكتابة تعليق.