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

Posts tagged ‘استخدام’

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

وورد بريس wp

yourcolor.net

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

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

وهذه الفكرة تحتاج برمجة اضافة وبعد بحث طويل في موقع ووردبريس وجدت هذه الاضافة 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.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

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

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

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

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

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

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

التصنيف:

الووردبريس wp

Tagged with:

كيفية عمل قائمة بريدية – YourColor

الووردبريس wp

yourcolor.net

في هذا الفيديو يتم شرح كيفية عمل قائمة بريدية في الووردبريس باستخدام الfeedburner
شاهد الفيديو
http://www.youtube-nocookie.com/embed/2Bl4HQn9zBs

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

التصنيف:

الووردبريس wp

Tagged with:

علامات وأكواد القوالب yourcolor – Template Tags

الووردبريس wp

التعريف بالعلامات والاكواد وطريقة كتابتها والتعريف بالباراميترات لبعضها وشرح طريقة عرض معلومات حول مدونتك بطريقة جميلة وسلسة, والمزيد عن الشروط فى الووردبريس وكيفية إستخدامها وبعض التطبيقات عنها, وبعض التطبيقات العامة ومراجع حتى لا تتوقف عند هذا الموضوع ليكون الطريق أمامك لتخصيص قالبك بطابعك الخاص.

هنا قمت بوضع بعض من اهم الاكواد التى ستساعدك فى تطوير مدونتك او فى تصميم استايل لمدونتك او اضافة تعديلات على شكل المدونة بدون الحاجه إلى البحث الكثير, كما ستجد الكثير من المراجع المهمة والمفصلة لكود معينة او لبقية مجموعة او فئة معينة من الاكواد, بالاضافة لبعض التطبيقات والاكواد المشهورة والمستخدمة بكثرة لجعل مدونتك اكثر ديناميكية, وهذه الاوسمة او الاكواد تساعدك فى عرض الكثير من المعلومات او البيانات السريعة فى مدونتك او تخصيصها وتغيير محتواها كاملا او كما تريد مما يجعل من مدونتك مدونة فريدة ذات طابع وطريقة عرض خاصة فريدة ومميزة, فى الآتى ستجد بعض الاكواد وأكثرها استخداما فى القوالب او فى المدونة بشكل عام.

ما هى علامات القوالب اوTemplate Tags :

هو كود يجعل الووردبريس يقو ببعض المهام او جلب بعض المعلومات او تغيير طريقة عرض شئ معين فى الصفحة فى حالة معينة او شرط معين, او تطبيق فلتر معين قبل العرض او التحقق من شئ معين, مما يجعلك تتحكم اكثر وتزيد من دينياميكية المدونة وتخصيصها بطريقة مميزة.

المعلمات او الباراميترات كما افضل ان اقول:

اذا كنت مطور ويب او مبرمج لن تحتاج ان تعرف عن Parameters وهى تضاف الى الاوسمة لاضافة او تخصيص عرض شئ مفصل معين, دعنا نأخذ مثال مع

bloginfo()
<strong>تستخدم بهذه الطريقة</strong>
Bloginfo(‘name’) لعرض اسم المدونة
Bloginfo(‘url’) لعرض رابط المدونة
Bloginfo(‘parameters’) ووضع الباراميترات الخاصة بالكود او الدالة التى تحب, ولاتنسي وسم البى إتش بي
<?php bloginfo(”) ?>

والان دعنا نذهب لبعض الاكواد وشرحها:

نوع المحتوى, ترميز الصفحة إصدار الووردبريس:

عنوان الصفحة:

view sourceprint?1 <title>
<?php
if (is_home()) {
echo bloginfo(‘name’);
} elseif (is_404()) {
echo ‘404 Not Found’;
} elseif (is_category()) {
echo ‘Category:’; wp_title(”);
} elseif (is_search()) {
echo ‘Search Results’;
} elseif ( is_day() || is_month() || is_year() ) {
echo ‘Archives:’; wp_title(”);
} else {
echo wp_title(”);
}
?>
</title>

RSS

<div id=”rss”> <a href=”<?php bloginfo(‘rss2_url’); ?>” title=”Subscribe to
us”></a> </div>

عرض التصنيفات الرئيسية:

<?php wp_list_categories('sort_column=menu_order&depth=1&title_li=');?>

عرض التصنفيات الفرعية:

<?php if (is_category()){wp_list_categories
(‘orderby=id&show_count=0&title_li=0&child_of=’.$cat); }?>

عرض قائمة الصفحات:

<?php wp_list_pages('title_li=&depth=1') ?>

الصفحات الفرعية:

<?php
$children = wp_list_pages(‘title_li=&child_of=’.$post->ID.’&echo=0′);
if ($children) { ?>
<?php echo $children; ?>
<?php } ?>
<?php if (is_category()){wp_list_categories
(‘orderby=id&show_count=0&title_li=0&child_of=’.$cat); }?>

عرض التاريخ:

<?php the_time('F jS, Y') ?>

عرض التصنيفات:

<?php the_category(',') ?>

عدد التعليقات:

<?php comments_number('no comment','1 comment','% comments'); ?>

تعديل المشاركة:

<?php edit_post_link('edit','',''); ?>

عرض الاوسمة او Tags :

<?php the_tags('Tagged with: ',' • ','<br/>'); ?>

ارسال الصفحة الى تويتر:

<a href=”http://twitter.com/home?status=Currently reading <?php the_permalink
(); ?>” title=”Click to send this page to Twitter!” target=”_blank”>Twitter</a>

RSS التعليقات:

<a href=”<?php comments_rss_link(‘RSS 2.0’); ?>” title=”Comment RSS”
target=”_blank”> Follow responses</a>

انتقل الى صندوق كتابة التعليقات:

<a href=”#respond” title=”To comment form” target=”_blank”>leave a
response</a>

تراك باك او المراجع:

<a href=”<?php trackback_url(display); ?>” title=”Trackback”
target=”_blank”>Trackback</a>

الشريط الجانبي Sidebar

للعرض بطريقة مرنة

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘right-sidebar’)
) : ?>
<?php endif; ?>

سحابة الاوسمة باحجام مختلفة …

<?php wp_tag_cloud('smallest=8&largest=36&'); ?>

عرض الارشيف بالشهر

<?php wp_get_archives(‘type=monthly’); ?>
ويمكنك تغيير monthly اذا اردت شيئا آخر

أظهار صفحة معينة :

<?php
query_posts(‘pagename=اسم الصفحة’);
?>

عمل استدعاء لملف معين Include

<?php include (TEMPLATEPATH . '/drsni.php'); ?>

جلب احدث التدوينات من فئة معينة وبعدد معين :

<?php
$feature_posts = get_posts
(‘category=1&numberposts=5&orderby=post_name&order=DSC’);
foreach($feature_posts as $post) : setup_postdata($post);
?>
<?php endforeach; ?>

عرض صورة التدوينة فى حال كانت كحقل مخصص:

<?php $image = get_post_meta($post->ID, ‘image’, TRUE); ?>
<?php if($image) { ?>
<img src=”<?php echo $image; ?>” alt=”Alt Text” />
<?php } ?>
<?php //get article_image (custom field) ?>
<?php $image = get_post_meta($post->ID, ‘article_image’, true); ?>
<a href=”<?php the_permalink() ?>”><img src=”<?php echo $image; ?>”
alt=”<?php the_title(); ?>” /></a>

قائمة بتدوينات عشوائية:

الصور

قائمة بكل الصور المرفقة:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul><?php
$post_parent = get_post($post->ID, ARRAY_A);
$parent = $post_parent[‘post_parent’];
$attachments = get_children( array( ‘post_parent’ => $post_id, ‘post_type’ =>
‘attachment’, ‘orderby’ => ‘menu_order ASC, ID’, ‘order’ => ‘DESC’) );
foreach($attachments as $id => $attachment) :
echo wp_get_attachment_link($id, ‘thumbnail’, true);
endforeach;
?>
</ul>
<?php endwhile; else: ?>
<p><?php _e(‘فارغ’); ?></p>
<?php endif; ?>

الملفات الهامه :

header.php– منطقة الهيدر
index.php – الرئيسية
sidebar.php – الشريط الجانبى او القائمة الجانبية
footer.php – الفوتر
single.php – التدوينة
page.php – الصفحة
comments.php – التعليقات
search.php – محتوى البحث
searchform.php – البحث
archive.php – الارشيف
functions.php – الدوال الخاصة
404.php – صفحة الخطأ

بعض اوامر الاستدعاء او الاحتواء :

<?php get_header(); ?> الهيدر
<?php get_sidebar(); ?> القائمة الجانبية
<?php comments_template(); ?> التعليقات
<?php get_footer(); ?> الفوتر

معلومات المدونة

عن طريق هذا الامر مع تغييرxxx باى شئ ترغب

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

امثلة

name – اسم المدونة
admin_email –ايميل المدير
rss2_url-رابط التغذية
description- الوصف للمدونة
url-رابط المدونة
wpurl-مكان التنصيب
version- إصدار المدونة

الشروط:

هنا الشروط اداة مفيدة جدا لجعل الموقع اكثر ديناميكية, لوضع شرط معين يمكنك اختيار من بين قائمة الشروط الاتية ووضع الكود

مكان xxxx

<?php if (xxxxx()) {?>

هنا الاكود المنفذ حين تحقق شرطك

<?php }?>

الشروط:

in_category
is_404
is_archive
is_admin
is_category
is_page
is_attachment
is_author
is_comments_popup
is_date
is_day
is_feed
is_front_page
is_home
is_month
is_page_template
is_paged
is_preview
is_search
is_single
is_singular
is_sticky
is_tag
is_tax
is_time
is_trackback
is_year
pings_open
comments_open
has_tag

امثلة :

is_home() – فى حالة كنا فى الرئيسية
is_front_page() – رئيسية المدونة او الصفحة
is_single – فحالة عرض تدوينة
is_page(‘about’) – فى حالة عرض صفحة معين وفى هذه الحالة صفحة “عنى”

وهكذا , ولا يجب ان ننسي الباراميتر لكل شرط وللمزيد عن هذه الشروط بشكل موسع http://codex.wordpress.org/Conditional_Tags

بعض الاوامر المعروفة والمستخدمة بكثرة :

<?php the_time() ?>
<?php the_date() ?>
<?php the_title(); ?>
<?php the_permalink() ?>
<?php the_category() ?>
<?php the_author(); ?>
<?php wp_list_pages(); ?>
<?php wp_tag_cloud(); ?>
<?php wp_list_cats(); ?>
<?php get_calendar(); ?>
<?php wp_get_archives() ?>
<?php posts_nav_link(); ?>
<?php next_post_link() ?>
<?php previous_post_link() ?>

تطبيقات منوعة:

عرض صور مصغرة عشوائية للصور الموجودة فى مكتبة الصور:

<?php
$args = array(
‘post_type’ => ‘attachment’,
‘numberposts’ => -1,
‘post_status’ => null,
‘post_parent’ => $post->ID,
‘orderby’ => ‘rand’
);
$attachments = get_posts($args);
$noimages = count($attachments);
if ($attachments) {
foreach ($attachments as $attachment) {
$alttxt = $attachment->post_title;
$imgid = $attachment->ID;
$fileurl = $attachment->guid;
$meta = wp_get_attachment_metadata($imgid);
$imgw = $meta[‘sizes’][‘thumbnail’][‘width’];
$imgh = $meta[‘sizes’][‘thumbnail’][‘height’];
$imgext = substr($fileurl, -4);
$fileurl = substr($fileurl, 0, -4);
$fileurl = $fileurl.”-“.$imgw.”x”.$imgh.$imgext;
// construct the image
echo “<img src='”.$fileurl.”‘ alt='”.$alttxt.”‘ class=’alignleft highlightimg’ />”;
break;
}
}
the_excerpt(”);
?>

استدعاء ملف معين فى حالة عرض رئيسية المدونة:

<?php if ( is_home() ) {
include (‘file.php’);
} ?>

إستايل خاص بتصنيف معين وهنا ملف catstyle سيكون المسؤول عن الاستايل لهذا للتصنيف 2:

<?php if ( is_category(‘2’) ) {
<link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/catstyle.css”
type=”text/css” media=”screen” />;
<?php } else { ?>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”
type=”text/css” media=”screen” />
<?php } ?>

صورة لتصنيف معين:

<?php if (is_category(‘2’) ):
<img src='<?php bloginfo(‘template_url’); ?>/images/cat2.jpg’ />
<?php } elseif (is_category(‘3’) ):
<img src='<?php bloginfo(‘template_url’); ?>/images/cat3.jpg’ />
<?php endif; ?>

عرض صور مصغرة عشوائية للصور الموجودة فى مكتبة الصور:

ستظهر بهذا الشكل :المقالات الاحدث » , المقالات الاقدم «

<?php next_posts_link(‘المقالات الاحدث&raquo;’) ?>
<?php previous_post_link(‘&laquo; المقالات الاقدم’); ?>

عنوان الصفحة:

كود جميلة لعرض عنوان الصفحة فمثلا اذا كنت فى الصفحة الرئيسية سيعرض لك اسم المدونة, واذا كانت الصفحة مفقودة سيظهر
لم يتم العثور على الصفحة فى العنوان و فى البحث
سيكون العنوان نتائج البحث.

<?php
if (is_home()) { echo bloginfo(‘name’); } elseif (is_404()) { echo ‘Drsni – لم يتم العثور
على الصفحة’; } elseif
(is_search()) { echo ‘Drsni – نتائج البحث’; } else { echo ‘Drsni| ‘; wp_title(”); }
?>

سحابة الاوسمة القيمة الصغرى 1 و الكبري 9 ويمكنك تغييرهما:

<?php wp_tag_cloud('smallest=1&largest=9&'); ?>

المراجع:

Home

http://codex.wordpress.org/Conditional_Tags/

http://codex.wordpress.org/

http://codex.wordpress.org/Template_Tags

http://codex.wordpress.org/Include_Tags

http://codex.wordpress.org/Stepping_Into_Template_Tags/

شكرا لكم, واتمنى ان ارى تعليقاتكم الجميلة.

انتهى الدرس

التصنيف:

الووردبريس wp

Tagged with:

إضافات ووردبريس لتحكم أكبر وأسهل فى لوحة التحكم لمدونتك – yourcolor

الووردبريس wp

لا يمكننا تخيل الووردبريس بدون إضافات, او أي سكربت تدوين آخر؛ حيث تسهل علينا الإضافات الكثير من الاعمال البرمجية وتوفير الوقت وتنظيم اكثر لمحتويات مدونتك, بالإضافة الى المميزات الجديدة التى تضيفها بعض الاضافات لتجعل مدونتك كما تريد, وهناك أيضا إضافات لك انت لتساعدك فى اضافة ادوات اكثر وتحكم وسهولة اكبر تجدها فى لوحة تحكم المدونة, وفى هذا الموضوع سنكشف الستار عن هذه الإضافات الرائعة.

سأقوم بالكشف عن الكثير من الإضافات لاستخدامها فى أى شئ من اخفاء عناصر لا تحتاج إليها وحتى تعديل لوحة التحكم وإضافة أدوات تسهل عليك الطريق لإدارة مدونتك.

إضافة القائمة السريعة (Admin Quick Menu) :

هذه الاضافة تمدك بقائمة سريعة (Quick Menu) فى الشريط الجانبي, بإستخدامها يمكنك الدخول إلى صفحات خارجية مهمة مثل: Google Analytics و جوجل أدسنس Google Adsense و جوجل آدوردز Google Adwords وأدوات مشرفي المواقع والكثير من الادوات الادارية, ويمكنك تلخيص مهام إضافة القائمة السريعة (Admin Quick Menu) فى أنها مفضلة او صندوق لجمع جميع الاغراض الادارية الخارجية لمدونتك.

لكي تضيف عنصر جديد للقائمة فقط ادخل للاعدادات ثم ضع رابط الصفحة وعنوان لها, ويمكنك ايضا من الخيار Security تحديد مستوي الامان لظهور أحد عناصر القائمة لأعضاء معينين.

لتحميل الاضافة من هنا.

Easy Admin Color Schemes :

هذه الإضافة من اسمها “Admin Color Schemes” تتيح لك تخصيص او اختيار ألوان واجهة لوحة التحكم بدون كتابة اي CSS او اكواد برمجية, ويمكنك التبديل بين عدة الوان متعددة لتناسب زوقك فقط بنقرة واحدة وبسهولة, ويمكنك حتى اختيار مجموعة الوان جديدة والإضافة ستقوم بتوليد الاكواد CSS تلقائيا لتلبي طلبك, ويمكنك استيراد وتصدير الوانك من مدونة إلى أخري.

لانشاء مجموعة الوان جديدة (color scheme) : كل ما عليك فعلة هو اختيار 4 الوان اساسية من صندوق الالوان, ويمكنك ايضا التعديل والحذف.

لتحميل الإضافة من هنا.

لإضافة تذكير قبل نشر المقال Pre-publish Reminders :

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

ويمكنك تعديل واضافة التذكيرات التى تريدها, وايضا اختيار الالوان للكتابة ولخلفية النص والتى تجعل النص بارز الوضوح لعين الكاتب.

لتحميل الاضافة من هنا.

Simply Tags :

مع هذه الاضافة ستحصل على الكثير من الإمكانيات لادارة العلامات او الاوسمة او Tags لتدويناتك, حيث يمكنك التعديل الجماعي على عدد كبير من التدوينات, وتعرض لك ايضا خيار سريع لتختار الاوسمة لتدوينتك عن طريق النقر, وتحتوى الاضافة ايضا على خاصية كتابة الاوسمة للتدوينة تلقائيا؛ وذلك اعتمادا على كلمات التدوينة.

وهذه الاضافة ستفيدك أكثر اذا كنت تريد اضافة او حذف او تعديل الأوسمة للكثير من التدوينات او المقالات دفعة واحدة, تخيل صعوبة الامر عندما تريد اعادة تسمية وسم معين Tag لمئات المقالات فى موقعك, هذا حتما سيأخذ منك ساعات, ولكن مع Simply Tags سيأخذ هذا من وقتك دقائق.

لتحميل هذه الإضافة من هنا.

Ozh Admin Drop Down Menu :

هذه الاضافة تعزز انتاجيتك وتختصر عليك الطرق فى الوصول الى الخيار الذي تريد فى إدارة اى شئ فى مدونتك او موقعك, حيث تقوم بإحضار روابط التحكم فى قائمة منسدلة أنيقة الشكل فى أعلى الصفحة.

من الآن فصاعداً فلن تحتاج للبحث عن خيار التحكم المناسب الذي تريده, وستتنقل الى ما تريد بسهولة من هذه القائمة المنسدلة, هذه الاضافة توفر لك الكثير من الشاشات وتجعل اللوحة أسهل بالاضافة إلى السلاسة المطلقة.

ويمكنك التعديل على هذه الاضافة بفتح او اغلاق header الخاص بها, او إختيار إستايل لها او اخفاء/إظهار ايقونات القائمة المنسدلة وعدة خيارات اخرى جميلة.

لتحميل هذه الإضافة من هنا.

Pop Menus For WP Admin :

هذه الأضافة لمن يريد تسريع تنقلة فى القوائم فى الشريط الجانبي؛ حيث تظهر قوائم منبثقة لكل خيار فى الشريط الجانبي “على شرط ان تكون العناصر فى حالة مقلصة او مغلقة, فقط مرر الماوس فوق ماتريد وستجد القائمة المنبثقة خرجت لك, مما توفر لك المساحة وضغط روابط التحكم تلقائيا.

لتحميل هذه الإضافة من هنا.

Admin Management Extended:

فى الوضع العادى والتقليدي يجب عليك فتح صفحة التعديل على المقال او الصفحة لكي تغير خصائصها او تعدل عليها, ولكن مع هذه الاضافة ستجد ايقونات محددة فى صفحة التعديل على التدوينات او الصفحات؛ مما يجعلك تجري التغييرات التى تريدها بدون فتح شاشة التعديل, ويمكنك التعديل على عنوان المقال/الصفحة, التعديل على المقتطف, التعديل على تاريخ نشر المقال بالاختيار من قائمة تقويم منبثقة.

وهذه الاضافة ايضا تسمح لك بـ : تبديل حالة التعليقات “مغلق/مفتوح”, تغيير ترتيب الصفحة عن طريق السحب والإسقاط, وايضا التصنيفات وإدارة الأوسمة, وإخفاء المسودات … والكثير من الاشياء التى تتيح لك التعديل السريع.

لتحميل هذه الإضافة من هنا.

Adminimize:

إضافة Adminimize تمكنك من إخفاء العديد من العناصر, فيمكنك إخفاء العديد من العناصر الغير ضرورية من القائمة الرئيسية, القائمة الفرعية, وحتى من لوحة التحكم. ويمكنك نقل “لوحة التحكم” او “dashboard” إلى القائمة أو حذفها وإزالتها, ويمكنك وضع إعدادات مختلفة لأعضاء مختلفة حسب احتياجاتك ومتطلباتك. وتتيح لك إمكانية تغيير او تبديل صفحة الكتابة او الوسائط او الروابط او …

لتحميل هذه الإضافة من هنا.

WordPress Admin Bar :

هذه الإضافة تضيف لك الشريط العلوى الخاص بمدونات ووردبريس.كوم wordpress.com ؛ حيث تتيح لك الوصول لمميزات لوحة التحكم بدون الدخول إلى لوحة التحكم, ببساطة ليمكنك التحكم من أي مكان وأي صفحة فى موقعك فقط بمجرد تسجيل دخولك, ويمكنك أيضا التحكم بإظهارها او إخفائها.

لتحميل هذه الإضافة من هنا.

Admin Expert Mode :

هل دونت لفترة وتعرف كيف تكتب؟ هل تتضايق من وجود الكلمات المساعدة او التى تشرح لك خصائص كل شئ اسفله؟ .

إذا كنت ملم بالووردبريس وتريد إزالة الوصف والكتابة التى تشرح كل شئ فركب هذه الإضافة.

عل سبيل المثال انظر إلى هذه الصورة التوضيحية؛ وستجد الشكل الاعتيادى لصفحة الكتابة:

وعند استخدامك لهذه الإضافة ستزيل لك هذه الاوصاف والشروحات مميا يجعل لك ايضا مساحة اقل فى الصفحة :

مع العلم ان هذه الإضافة لا تزيل اي بيانات او حقول, وايضا يجب على كل عضو ان يفعل وضع الخبير هذا “Admin Expert Mode” من حسابه او ملفة الشخصي.

لتحميل هذه الاضافة من هنا.

WordPress Admin Notepad:

هذه الإضافة تقوم بإنشاء مفكرة بسيط لك فى لوحة تحكم مدونتك؛ حيث يمكنك حفظ الملاحظات.

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

لتحميل هذه الاضافة من هنا.

Admin Trim Interface:

هذه الإضافة تجعلك ترتب او تشذب واجهة لوحة تحكمك وذلك بإزالة بعض العناصر الغير مرغوب فيها رابط “زيارة الموقع” او رابط لوحة التحكم او ازالة إصدار نسخة الووردبريس من أسفل الصفحة.

لتحميل هذه الإضافة من هنا.

WordPress Tweaks Plugin:

هذه الإضافة من الاضافات الجميلة فى اغلاق بعض المهام مثل : تعطيل الادخال التلقائي للاوسمة, تعطيل الرفع الفلاشي, تعطيل بعض مهام ادوات SEO و الامان, وايضا للتحكم فى وطريقة فتح روابط التعليقات.

لتحميل هذه الإضافة من هنا.

انتهى الدرس

التصنيف:

الووردبريس wp

Tagged with:

اعرض عناوين مواضيع قسم معين داخل موضوع -yourcolor

الووردبريس wp

يمكنك أن تعرض عدد معين من مواضيع قسم معين لكي يظهر داخل الموضوع او الصفحة. هذا قد يكون مفيدا اذا اردت صنع صفحة ارشيف، فيمكنك استخدام الكود مع عدد من الاقسام لتظهر جميعها في صفحة واحدة.

في البداية أضف الكود التالي في ملف functions.php للقالب الذي تستخدمه. هذا الكود يقوم بتعريف الكود القصير. لا تنسى أخذ نسخة احتياطية من الملف قبل أي تعديل.

function category_shortcode( $atts )
{
extract(shortcode_atts(array(
‘limit’ => ‘5’,
‘category’ => ”,
), $atts));
//The Query
query_posts(‘category=’ . $id . ‘posts_per_page=’ . $limit);
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo ‘<h3><a href=”‘; echo the_permalink(); echo ‘”>’; echo the_title(); echo ‘</a></h3>’;
echo the_excerpt();
endwhile; else:
endif;
//Reset Query
wp_reset_query();
}
add_shortcode(‘category’, ‘category_shortcode’);

بعد ذلك يمكن اضافة الكود التالي في أي موضوع أو اي صفحة:

[category id=# limit=5]

علامة المربع # تدل على رقم التعريف ID للقسم او التصنيف كما يمكنك تغيير الرقم خمسة ليظهر لك العدد الذي تريده من المواضيع . يمكنك استخدام هذا الكود أكثر من مرة لصنع صفحة تحتوي على المواضيع من جميع الأقسام مما يجعلها كالأرشيف.

التصنيف:

الووردبريس wp

Tagged with:

[Udem] محرك قوالب بفكرة جديدة – yourcolor

[Udem] محرك قوالب بفكرة جديدة

تعتبر محركات القوالب من الضروريات لكل مبرمج ذكي حيث يتم فصل البرمجة عن التصميم بشكل كلي، وجميع المبتدئين في تعلم PHP يتعلمون البرمجة مع خلط أكواد التصميم، وأنا أعتقد أن هذا شيء اعتيادي جداً. مع الوقت يبدأ المتعلم في فصل برامجه عن التصميم، وهذا هو الوقت المناسب لاستخدام محركات القوالب.

تعريف بسيط

اسم المحرك هو Udem ويعني باللغة الأمازيغية الواجهة أو الوجه.
فكرة المحرك هي تقسيم القالب إلى نصفين عن طريق دالة explode بواسطة هذا الكود

طلب بلوك من ملف php تتم معالجته مسبقا يعني مثل بلوك اخر عشرة مقالات يتم جلبه بدالة file_get_contents

طريقة الاستخدام

الخطوة الأولى

يجب ان يكون تصميمك متوافق مع هذه الصورة، مع مراعاة كتابة الأكواد في أماكنها الصحيحة:

<!– contents –>
<!– block: block_right –>
<!– block: block_left –>

الخطوة الثانية

<?php
// طلب ملف المحرك
include(‘Udem.php’);
// تعريف المحرك
$udem= new Udem;

// قرأة ملف القالب
$udem->ReadUdem(‘template.html’);

// تقسيم القالب الى نصفين وهذه الخطوة مهمة جدا
$udem->Center(‘contents’);
// تجربة طباعة نص في وسط ملف القالب
echo “تجربة المحرك مع ملف التصميم”;
// طباعة ما تبقى من ملف القالب
$udem->Angaro();
?>

تحميل آخر إصدار

هنا

التصنيف:

الووردبريس wp

Tagged with:

طريقة عرض عدد متابعيك على تويتر في مدونتك – yourcolor

طريقة عرض عدد متابعيك على تويتر في مدونتك

من منا لم يعد يستخدم تويتر … بل أصبح يمثل للبعض منا إدماناُ … ومع إنتشار تويتر ظهرت الكثير من من الاضافات و الطرق التي تمكنك من إضافة اخر ” تويتراتك ” في مدونتك …. ربما أتناولها في تدوينة قادمة ان شاء الله .. لكن كيف يمكن عرض عدد المتابعين لحسابي في تويتر في مدونتي ؟

حسناً اليك بعض الطرق :

TwitterCounter.com

يتيح لك موقع TwitterCounter اضافة عدد متابعيك كصورة مثل هذا النموذج :

يمكنك الأختيار من بين أربع نماذج مختلفة ستجدها هنا بالاضافة إلى إمكانية إختيار الصورة الكبيرة كالتالية

لإضافة هذا العداد في موقعك بكل بساطة إستخدم هذا الكود في موقعك مع تغير mo3aser إلى إسم حسابك في تويتر ( هذا الكود للبادج الإفتراضي )

<script src="http://twittercounter.com/embed/?username=mo3aser" type="text/javascript"><!--mce:2--></script>

أو يمكنك إستخدام إضافة TwitterCounter للوردبريس و التي تعتمد على نفس الموقع لتوليد هذا العداد

عرض عدد المتابعية كنص :

مع أن الموقع السابق يُمكنك من الأختيار من بين أربع أشكال مختلفة إلا أن هذا يظل محدوداً فالألوان المتاحة ليست كثيرة و التحكم في اسلوب و طريقة العرض وحجم الخطوط و غيرها من الخيارات غير متاح … و حتى نتمكن من التحكم المطلق في طريقة عرض العداد عن طريق CSS يجب أن يتم عرض هذا العداد كنص …

إضافة Twounter للوردبريس توفر هذا الأمر .. كل ما عليك تفعيل الاضافة و إستخدام الكود التالي في المكان الذي تريد ان يظهر فيه العداد في القوالب مع تغيير username إلى إسم حسابك في تويتر …

<?php echo twounter('username') ?>

أما إذا أردت عرض العداد في تدوينة أو صفحة فأستخدم الكود التالي مع تغيير username إلى إسم حسابك في تويتر :

[twounter]username[/twounter]

التصنيف:

الووردبريس wp

Tagged with:

شرح إستخدام الحقول الخاصة في ووردبريس – yourcolor

شرح إستخدام الحقول الخاصة في ووردبريس

إحدى الخواص الهامة التي توفرها ووردبريس و التي تهمنا نحن كمصممين .. فهي تمنحنا القدرة على زيادة خواص التدوينات و اضافة خواص كثيرة للقوالب التي نقوم بتصميمها … سأشرح في هذه التدوينة فكرة و طريقة عملها و كيفية إستغلالها في تصميم القوالب مع شرح مثال بسيط لإنشاء مصغرات للتدوينات بإستخدامها ..

مواقع إستخدمت فيها الحقول الخاصة …
متابعات عقبة إظهار فيديو في السايد بار الجانبي
مجموعة تايم كود إظهار صور مصغرة بجانب التدوينات
مدونة شبايك عن شبايك في فوتر المدونة للتحكم فيها من لوحة التحكم
حسناً لنبدأ …

من لوحة تحكم المدونة ومن صفحة اضافة تدوينة جديدة ستجد في الاسفل .. صندوق ” خصائص إضافية ” او ” Custom fields ” .. سنقوم بإنشاء حقل جديد … في مثالنا هنا سنقوم بإضافة حقل لإستخدامة لوضع رابط مرجع التدوينة .. سنضع في حقل الاسم (key) اسم هذا الحقل وليكن في مثالنا references و في حقل القيمة (value) سنضع رابط هذا المرجع وليكن http://ar.wikibooks.org .. لا تنسى الضغط على زر “ اضف حقل مخصص ” … شاهد الصورة :

الأن إلى القوالب …
لنتعرف على شكل الدالة التي سنستخدمها :

get_post_meta($post_id, $key, $single);

و تأخذ ثلاث بارامترات ..
$post_id : معرف التدوينة ID
$key : إسم الحقل الذي تريد إستخدامه
$single : وتأخذ إحدى القيمتين :
true لعرض أول حقل عند إستخدام اكثر من حقل بنفس الأسم
false لعرض الحقول كمصفوفة كما سنشرح لاحقا

حسنا داخل حلقة عرض التدوينة أضف التالي :

<h3>مراجع التدوينة</h3>
<?php echo get_post_meta($post->ID, "references",true); ?>

$post->ID : لجلب المعرف الخاص بالتدوينة .. ID
references : إسم الحقل الخاص الذي أضفناه
true : لا أملك سوى حقل references و حيد و بالتالي اريد عرضه هو فقط …

احفظ القالب و اذهب و شاهد التدوينة .. ستجد http://ar.wikibooks.org/ ظهرت في نهاية التدوينة … كما في الصورة

ما رأيك أن نجعلها كرابط بدلاً من ظهورها كنص .. إستخدم التالي :

<h3>مراجع التدوينة</h3>
<?php $references = get_post_meta($post->ID, "references",true); ?>
<a href="<?php echo $references ?>"><?php echo $references ?></a>

الأن أصبح لدينا رابط لمرجع التدوينة … لنفرض الأن أن لدينا تدوينة لم أقم بإضافة مراجع لها … سيظهر في نهاية التدوينة ” مراجع التدوينة “ دون أن يظهر تحتها أي مراجع لاني لم اقم باضافتها .. لاخفاء ” مراجع التدوينة “ عند عدم وجود مراجع سنستخدم شرط if للتحقق من وجود مراجع أم لا … شاهد الكود

<?php if(get_post_meta($post->ID, "references", $single = true)!="") :?>
   <h3>مراجع التدوينة</h3>
   <?php $references = get_post_meta($post->ID, "references",true); ?>
   <a href="<?php echo $references ?>"><?php echo $references ?></a>
<?php endif; ?>

تدوينة متعددة المراجع !
الأن نريد اضافة أكثر من مرجع للتدوينة .. من لوحة التحكم من جديد قم بإضافة المراجع الأخرى و بنفس key أو الإسم وهو references الأن إلى القوالب من جديد .. في هذه الحالة سنستخدم foreach لجلب كافة الحقول الاضافية التي تحمل الاسم references … شاهد الكود :

<?php if(get_post_meta($post->ID, "references", $single = true)!="") :?>
   <h3>مراجع التدوينة</h3>
   <?php $references_field = get_post_meta($post->ID, "references",false);
   foreach ( $references_field as $references ) { ?>
   <a href="<?php echo $references ?>"><?php echo $references ?></a> <br />
<?php } endif; ?>

احفظ القالب و قم بمعاينة التدوينة ستجد بقية المراجع قد ظهرت

لنقوم بعمل تطبيق صغير على الدرس .. تطبيقنا هنا هو اضافة صورة مصغرة للتدوينة تظهر بجوارها في الصفحة الرئيسية و في الأرشيف بينما لا تظهر مثلا في صفحة العرض الكامل للتدوينة …

من لوحة التحكم وكما شرحنا سابقاً قم باضافة حقل جديد وليكن بإسم post-image ثم نضع في القيمة عنوان الصورة .. في قالب index.php و archive.php و search.php و قبل سطر إستدعاء الدالة the_content سنقوم بإضافة الكود التالي :

<?php if(get_post_meta($post->ID, "post-image", $single = true)!="") :?>
   <div>
      <?php $post_image = get_post_meta($post->ID, "post-image",true); ?>
      <img src="<?php echo $post_image ?>" alt="" />
   </div>
<?php endif; ?>

و هذا هو كود CSS الذي أستخدمته في المثال الموجود في الصورة بالأعلى :

.post-image{
	float:left;
	margin:0 10px 0 10px;
	padding:2px;
	border:1px #CCC solid;
}

إذا اردت أن تظهر الصورة المصغرة في صفحة عرض التدوينة مفردة فاضف الكود أيضاً في القالب single.php و إذا اردت إستخدمها مع الصفحات فأضف الكود لقالب page.php

هناك دوال أخرى غير الدالة التي شرحتها ولكنها كلها تقوم بنفس الوظيفة مع اختلافات بسيطة في طريقة الاستخدام .. يمكنك مراجعة صفحة الحقول الخاصة على WordPress Codex

التصنيف:

الووردبريس wp

Tagged with:

كيف تستخدم إضافة yourcolor – FeatureMe

كيف تستخدم إضافة FeatureMe

سألني أحد القراء عن
إضافة FeatureMe تسمح لك هذه الإضافة بعرض “التدوينات المميّزة” أو “أهم المواضيع”
على شكل شاشة دينماكية متحركة. أنظر الصورة أعلاه أو أعلى الصفحة في هذا القالب
للمعاينة. بالطبع، هنا أنا أستخدمها في ضمن إطار خاص بالقالب ولكنك تستطيع
إستخدامها على حدة. سأشرح لك في هذه التدوينة كيف تقوم بذلك بالضبط

إضافة FeatureMe

هدف
الإضافة

عرض شاشة متحركة بالتدوينات المميّزة.

مثال حي

أنظر أعلى الصفحة في هذا القالب.

تعريب

لا تحناج. هذه إضافة بسيطة جداً.

طريقة العمل

1- حمّل الإضافة واستخرج محتواها

2- إرفع مجلد الإضافة إلى مجلد wp-content>plugins بإستخدام برنامج FTP (لمزيد من
التفاصيل راجع تدوينتي هذه)

3- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

4- إذهب إلى صفحة التدوين في محرر ووردبرس وأضف تدوينة

5- قم بتحديد إعدادات التدوينة كما يلي:

إذهب إلى قسم الخصائص الإضافية وقم بصنع خاصية إسمها thumbnail وقيمتها تساوي مسار
الصورة الخاصة بالتدوينة على موقعك.

أنقر على أو إختار مربع “This is a cool entry, feature it” في أسفل صفحة محرر
التدوينة.

6- لوضع الإضافة في مدونتك إستخدم الكود التالي (في ملف header.php مثلاً):

حيث
max_posts تساوي عدد التدوينات المميّزة التي تريد عرضها.

بالطبع، لتحديد شكل أو طريقة عرض التدوينات المميّزة عليك
أن تصنع كلاس خاص بها في ملف الستايل وأن تضع هذا الكود
داخله.

هذا كل
شيئ. بالتوفيق، وما عليكم إلأ السؤال إن إحتجتم أي مساعدة.

yourcolor-featureme

للتحميل

التصنيف:

الووردبريس wp

Tagged with:

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

Posts tagged ‘استخدام’

الووردبريس wp

والان دعنا نذهب لبعض الاكواد وشرحها:

نوع المحتوى, ترميز الصفحة إصدار الووردبريس:

عنوان الصفحة:

عرض التصنيفات الرئيسية:

عرض التصنفيات الفرعية:

عرض قائمة الصفحات:

الصفحات الفرعية:

عرض التاريخ:

عرض التصنيفات:

عدد التعليقات:

تعديل المشاركة:

عرض الاوسمة او Tags :

ارسال الصفحة الى تويتر:

RSS التعليقات:

انتقل الى صندوق كتابة التعليقات:

تراك باك او المراجع:

الشريط الجانبي Sidebar

للعرض بطريقة مرنة

سحابة الاوسمة باحجام مختلفة …

عرض الارشيف بالشهر

أظهار صفحة معينة :

عمل استدعاء لملف معين Include

جلب احدث التدوينات من فئة معينة وبعدد معين :

عرض صورة التدوينة فى حال كانت كحقل مخصص:

قائمة بتدوينات عشوائية:

قائمة بمواضيع Tag او وسم :

الصور

قائمة بكل الصور المرفقة:

الملفات الهامه :

بعض اوامر الاستدعاء او الاحتواء :

الشروط:

هنا الاكود المنفذ حين تحقق شرطك

الشروط:

امثلة :

وهكذا , ولا يجب ان ننسي الباراميتر لكل شرط وللمزيد عن هذه الشروط بشكل موسع http://codex.wordpress.org/Conditional_Tags

بعض الاوامر المعروفة والمستخدمة بكثرة :

تطبيقات منوعة:

عرض صور مصغرة عشوائية للصور الموجودة فى مكتبة الصور:

استدعاء ملف معين فى حالة عرض رئيسية المدونة:

إستايل خاص بتصنيف معين وهنا ملف catstyle سيكون المسؤول عن الاستايل لهذا للتصنيف 2:

صورة لتصنيف معين:

عرض صور مصغرة عشوائية للصور الموجودة فى مكتبة الصور:

ستظهر بهذا الشكل :المقالات الاحدث » , المقالات الاقدم «

عنوان الصفحة:

سحابة الاوسمة القيمة الصغرى 1 و الكبري 9 ويمكنك تغييرهما:

المراجع:

شكرا لكم, واتمنى ان ارى تعليقاتكم الجميلة.

انتهى الدرس

الووردبريس wp

سأقوم بالكشف عن الكثير من الإضافات لاستخدامها فى أى شئ من اخفاء عناصر لا تحتاج إليها وحتى تعديل لوحة التحكم وإضافة أدوات تسهل عليك الطريق لإدارة مدونتك.

إضافة القائمة السريعة (Admin Quick Menu) :

لكي تضيف عنصر جديد للقائمة فقط ادخل للاعدادات ثم ضع رابط الصفحة وعنوان لها, ويمكنك ايضا من الخيار Security تحديد مستوي الامان لظهور أحد عناصر القائمة لأعضاء معينين.

لتحميل الاضافة من هنا.

Easy Admin Color Schemes :

لانشاء مجموعة الوان جديدة (color scheme) : كل ما عليك فعلة هو اختيار 4 الوان اساسية من صندوق الالوان, ويمكنك ايضا التعديل والحذف.

لتحميل الإضافة من هنا.

لإضافة تذكير قبل نشر المقال Pre-publish Reminders :

ويمكنك تعديل واضافة التذكيرات التى تريدها, وايضا اختيار الالوان للكتابة ولخلفية النص والتى تجعل النص بارز الوضوح لعين الكاتب.

لتحميل الاضافة من هنا.

Simply Tags :

لتحميل هذه الإضافة من هنا.

Ozh Admin Drop Down Menu :

ويمكنك التعديل على هذه الاضافة بفتح او اغلاق header الخاص بها, او إختيار إستايل لها او اخفاء/إظهار ايقونات القائمة المنسدلة وعدة خيارات اخرى جميلة.

لتحميل هذه الإضافة من هنا.

Pop Menus For WP Admin :

لتحميل هذه الإضافة من هنا.

Admin Management Extended:

لتحميل هذه الإضافة من هنا.

Adminimize:

لتحميل هذه الإضافة من هنا.

WordPress Admin Bar :

لتحميل هذه الإضافة من هنا.

Admin Expert Mode :

هل دونت لفترة وتعرف كيف تكتب؟ هل تتضايق من وجود الكلمات المساعدة او التى تشرح لك خصائص كل شئ اسفله؟ .

إذا كنت ملم بالووردبريس وتريد إزالة الوصف والكتابة التى تشرح كل شئ فركب هذه الإضافة.

عل سبيل المثال انظر إلى هذه الصورة التوضيحية؛ وستجد الشكل الاعتيادى لصفحة الكتابة:

وعند استخدامك لهذه الإضافة ستزيل لك هذه الاوصاف والشروحات مميا يجعل لك ايضا مساحة اقل فى الصفحة :