تصميم مواقع | خامات تصميم | برمجيات | css |design | vectors

Posts tagged ‘خارجية’

صفحة التنبيه و الروابط الخارجية واستخدامها في المدونة – YourColor

yourcolor.net

YourColor.Net

yourcolor.net

السلام عليكم ورحمة الله وبركاته

بينما اتجول في المنتديات لاحظت عند الضغط على بعض الروابط إما تحولك لصفحة تنبيه بأنك تغادر الموقع أو أن تنتظر حتى يتم عرض الرابط فأعجبتني الفكرة لكون هذه الصفحات لها دورين مهمين الدور الأول أنها تنبهك بأنك تغادر الموقع وأنها غير مسؤولة عن محتوى الموقع الذي أنت ذاهب اليه , أما الدور الثاني هو عرض اعلانات وهذا هو الاستغلال

وهذه الفكرة تحتاج برمجة اضافة وبعد بحث طويل في موقع ووردبريس وجدت هذه الاضافة WP Js External Link Info تقوم هذه الاضافة باعادة انشاء الروابط الخارجية وتوجيهها في التدوينات بصفحة خاصة تحتوي على معلومات المغادرة من الموقع و الاضافة تحتوي على صفحة عادية جدا, مثال لصفحة مغادرة المدونة

YourColor.Net

كما تلاحظون الصفحة بسيطة جدا لهذا سوف نقوم بعمل قالب لصفحة المغادرة لتناسب الموقع

اولا تنصيب الاضافة :

  1. نقوم بتحميل الاضافة من موقع لووردبريس من هنا
  2. قم فك الضغط عن الاضافة
  3. قم برفعها الى مجلد الاضافات هكذا : wp-content/plugins/wp-js-external-link-info
  4. بعد ذالك قم بتفعيلها من : لوحة التحكم > الإضافات > wp-js-external-link-info > تفعيل

الاضافة تحتوي 5 ملفات وهي :

js-external-link-info-de_DE.mo
js-external-link-info-de_DE.po
readme.txt
redirect.php
wp-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 ´ &ndash; ´; } ?> <?php bloginfo(´name´); ?> &ndash; <?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 ´ &ndash; ´; } ?> <?php bloginfo(´name´); ?> &ndash; <?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 ´ &ndash; ´; } ?> <?php bloginfo(´name´); ?> &ndash; <?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

الان نتوجه الى لوحة التحكم لإضافة صفحة جديدة

YourColor.Net

YourColor.Net

YourColor.Net

قم بنشر الصفحة الان يجب اضافة الصفحة للاضافة نقوم بالتالي :

من لوحة التحكم > الاعدادات > WP Js External Link Info

YourColor.Net

وهذا مثال للعمل الذي قمنا به :

YourColor.Net

والسلام عليكم ورحمة الله وبركاته

الاكاديمية العربية لفنون التصميم و الجرافيك

التصنيف:

الووردبريس wp

Tagged with:

بعض من دوال ووردبرس WordPress Function

بعض من دوال ووردبرس WordPress Function

yourcolor.net

yourcolor.net

yourcolor.net

هي بأختصار دوال functions (أو لنقل سطر برمجي) سابقة التجهيز فى وردبرس و تستطيع بها أن تفعل أشياء جميلة .. أمثلة:
لعرض قائمة أقسام المدونة

<?php wp_list_cats(); ?>

لعرض قائمة بصفحات المدونة الثابته

<?php wp_list_pages(); ?>

لعرض قائمة لأرشيف المدونة

<?php wp_get_archives(); ?>

لعرض قائمة بالروابط الخارجية

<?php get_links_list(); ?>

لعرض قائمة بأخر التعليقات المضافه

<?php @wp_widget_recent_comments(''); ?>

لعرض قائمة بأخر التدوينات المضافة

<?php @wp_widget_recent_entries(''); ?>

لعرض قائمة بالإسم الكامل للمسجلين بالمدونة(مفيدة للمدونات الجماعية مثل المشروع)

<?php wp_list_authors('show_fullname=1&exclude_admin=0'); ?>

 لعرض وصف القسم الحالي

<?php category_description(); ?>

شرح تفصيلي

<?php fetch_rss('xxx'); ?>

 تطبع لك أول 50 كلمة فقط من التدوينه بغض النظر عن خيار طرح الخلاصات كاملة أو جزئية

<?php the_content_rss('', TRUE, '', 50); ?>

(الإستخدام: إفتح ملف “الصفحة الرئيسية” فى القوالب و إستبدلها بدالة حيث xxx هى كلمة متغيرة حسب الثييم الذي تستخدمه).

<?php the_content('xxx'); ?>

الطريقة العامة لإستخدام هذه الدوال
الطريقة العامة لإستخدام أى من الدوال السابقة يكون بنسخه و لصقه فى أى ملف من ملفات القالب، فمثلاً لو أردت طبع صفحات المدونة الثابته فى أعلى الصفحة، إنسخ الدالة الخاصة بذلك فى أعلى الصفه 😀 .. أقصد ملف أعلى الصفحة فى القالب الذى تستخدمه. بالطبع هذا يتطلب أن تكون عندك خلفيه و لو بسيطه على الـ HTML

الطريقة الخاصة بكل داله

هناك لكل دالة من هذه الدوال ما يعرف عربياً بالمقابض أو تقنياً Arguments و هى مثل الخيارات Options فى أى برنامج و مثال على ذلك أخر دالة ذكرتها و التى تطبع أول 50 كلمة من التدوينه، حيث يمكنك تغيير الرقم 50 إلى 60 مثلاً و هذا يسمى argument خاص بالدالة أو مقبض تتحكم فيه بخصائص ما ستطبعه
أدوات إضافية
بصور رئيسية يجب أن تعلم هل الدالة التى ستستخدمها متوافقة مع إصدارة وردبرس الخاصة بك أم لا و هذه البرمجية تساعدك كثيراً فى هذا الأمر WordPress Functions Implementation History

التصنيف:

الووردبريس wp

Tagged with:

معرض الوسوم