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

Posts tagged ‘تطوير’

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

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

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

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

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

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

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

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

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

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

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

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>;
charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />

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

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: ',' &bull; ','<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>

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

 <ul>
<?php
$rand_posts = get_posts(‘numberposts=عدد التدوينات&orderby=rand’);
foreach( $rand_posts as $post ) :
?>
<li><a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
<?php the_time(‘M d Y’); ?>
</li>
<?php endforeach; ?>
</a>
</ul>

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

 <ul>
<?php
$myposts = get_posts(‘numberposts=العدد هنا&tag=الوسم’);
foreach( $myposts as $post) :
?>
<li><a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
<?php the_time(‘M d Y’); ?>
</li>
<?php endforeach; ?>
</a>
</ul>

الصور

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

 <?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
$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 next_posts_link(‘المقالات الاحدث&amp;raquo;’) ?>
<?php previous_post_link(‘&amp;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&amp;largest=9&amp;'); ?>

المراجع:

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/

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

 انتهى الدرس 

13 أضافة مفيدة للوردبريس تجعل الحياة أسهل – yourcolor

13 أضافة مفيدة للوردبريس تجعل الحياة أسهل

yourcolor.net

yourcolor.net

بأضافات الوردبريس وصراحة كل يوم أكتشف مزايا جميلة للوردبريس وعالم من الأضافات المتجددة التي تسهل من تطويع هذا السكربيت الرائع  وهنا أنوه أن وضعي لهذه الأضافات علي سبيل التعريف والتذكير لنفسي ولكم بهذه الأضافات ولست أجرب كل اضافة ولكن أضع لكم فرصة التجربة ومعرفة أرائكم بهذه الأضافات ..
1- الأضافة الأولي : WordPress Download Monitor
أحيانا تود جعل وردبريس كمركز برامج مثلا توفر برامج معينة وتود جعلها متاحة للتحميل للزوار …وهذه الاضافة تمكنك من رفع وإدارة التحميلات وتعقب عدد الضغطات والنقرات مثلا الملف هذا عدد من قام بتحميله ..وكذلك عرض الروابط ..للتحميلات وتسهل عليك إدراة هذه الأشياء ..

yourcolor.net

2- الأضافة الثانية : Plugin Manager
وهي اضافة تسهل لك عملية تركيب الأضافات من موقع وردبريس WordPress.org بشكل واجهة بسيطة مع الأجاكس ..وتعرض لك تفاصيل الأضافة من تاريخ الأضافة وإصدراها وعدد التحميلات بشكل رائع

yourcolor.net

3- الأضافة الثالثة : Google Analytics for WordPress
وهي خاصة ببرنامج الإحصائيات الرائع جوجل أنليتكس ..الخاص بتحليل المواقع وعرض أحصائيات عن عدد الزوار ومن أي ياتوا بشكل يومي وأسبوعي وشهري ..وكذلك معرفة الزوار وماذا يفضلوا من محتوي والوقت المستخدم لتصفح موقعك بإختصار برنامج رائع لمعرفة كل كبيرة وصغيرة عن موقعك والزوار، هذه الأضافة تأتي لك للمساعدة من خلال حسابك بالجوجل أنليتكس ووتضع الكود الخاص بفحص موقعك وتمكن جوجل من فحص التدوينات وكذلك الروابط والتعليقات ..وروابط أصدقاء المدونة Blog Roll والتحميلات ..والصور وعمليا البحث ..
صراحة أثناء عملي للثيم الجديد نسيت وضع الكود للجوجل أنليتكس ..ودخلت وجدت أن لم يعد هناك احصاءات لموقعي وبعد اكتشافي لهذا الخطأ قمت بوضع الكود يدوياً وأثناء كتابي لهذه التدوينة أكتشفت انه هناك اضافة بكل سهولة من خلال وضع بيانات حسابك بها تقوم تلقائيا بزرع هذا الكود ..:) شكرا لعالم اضافات وردبريس الرائع

yourcolor.net

4- الأضافة الرابعة : Search Everything
وهي اضافة خاصة بالبحث ..هناك من سيقول طبعا البحث متوفر مع وردبريس صحيح كلامك ولكن هناك بعض القصور مع هذا البحث وهذه الأضافة توفر لك القدرة علي البحث داخل اي شئ ..مثلا التصنيفات والتدوينات والتعليقات والأرشيف ..وكل شئ

yourcolor.net

5- الأضافة الخامسة :  Advertising Manager
 وهي اضافة خاصة بالأعلانات وتسمي مدير الأعلانات ، تمكنك من إدارة إعلاناتك المختلفة مثلا إعلانات googld Adsense, AdBrite, Adify, AdGridwork, Adpinion, Adroll, Chitika, Openx, Shoppring Ads, Yahoo!pn, WidgetBuck والكثير من الأعلانات التي تستطيع وضعها داخل مدونتك وتمكنك من إدارتها بكل سهولة

yourcolor.net

6- الأضافة السادسة : Featured Content Gallery
وهي اضافة جميلة تمكنك من أنشاء جاليري (عرض تقديمي ) بأي مكان بمدونتك حيث تختار الصور والتصنيفات لها والصفحات وكذلك تمكنك من وضع نص علي الصورة وتستطيع تحديد الأبعاد للطول والعرض وكذلك الألوان ..والتنسيق الخاص بالأستايل ..شئ جميل حسنا سأقوم بتجربتها قريبا لأنني بحاجة لها فعلا ..

yourcolor.net

7- الأضافة السابعة : Subscribe2
وهي أضافة تمكنك من إدارة الأشتراكات للقائمة البريدية لمدونتك وتمكنك من عمل نشرة بريدية عند نشر تدوينة جديدة ، هناك خدمة بموقع Google Feedburner تمكنك ايضا من عمل قائمة بريدية وتحصل علي كود تضعه بمدونتك ويظهر مربع نص عند أدخال الزائر للبريد الألكتروني بهذا المربع سيتم اشتراكه فعليا بخدمة القائمة البريدية بمدونتك وفور تنشيطه للحساب سيحصل اي أي جديد من مدونتك عبر بريده الأكتروني وهذه ميزة جميلة ..تساعد علي التواصل مع جديد المدونة ..

yourcolor.net

8 – الأضافة الثامنة : WordPress Automatic upgrade
وهي اضافة جميلة ايضا وأعتقد هناك من تحث عنها بمدونتهم  وهي تمكنك من عمل تحديث تلقائي للمدونة بكل سهولة في خلال 5 خطوات

yourcolor.net

9- الأضافة التاسعة : TweetMeme Button
وهي اضافة خاصة بتويتر : حيث تمكنك من وضع زر لعمل Retweet للتدوينة ووضع عداد Counter لمعرفة عدد إعادة التويتر Retweet للتدوينة ..وسيتم التوضيح عبر الصورة هذه

yourcolor.net

10- الأضافة العاشرة : BuySellAds WordPress Plugin
وهي تمكنك من التوافق مع موقع Buysellads وتتضمن اضافة anti-AdBlock ، طبعا هذا الموقع يتيح بيع وشراء الأعلانات عبر المواقع وأغلب المدونات والمواقع المشهورة تشترك بيه ويمكن من خلال هذا الموقع شراء مساحات إعلانية وتحدد البيج رانك للمدونة وعدد زوارها وتخصصها بإختصار شبكة إعلانية ضخمة ..توفر عليك عناء البحث والجهد وهذه الأضافة تمكنك من وضع إعلانات هذه الشبكة من خلال كودك التعريفي هناك .

yourcolor.net

11- الأضافة الحادية عشر : Social Bookmarking for WordPress
طبعا كلنا نعلم المواقع الأجتماعية الخاصة بالويب 2.0 ونشر الروابط وغيرها وأحيانا تريد توفير بعض هذه الروابط بتدويناتك للزوار لمشاركة هذه التدوينة مثلا بموقعهم او عير تويتر او الفيس بوك أو Digg وهذه المواقع كثيرة جداً وهذه الأضافة تسهل عليك هذا حيث تضع مجموعة من أزار هذه الموقع بتدويناتك وصفحات المدونة وكذلك خلاصات الموقع وهي بعدد 99 أيقونة ..ويمكنك الأختيار لهذه المواقع

yourcolor.net

12- الأضافة الثانية عشر : User Community
وهي اضافة تمكنك من عمل مجتمع للمستخدمين لمدونتك حيث تعطيك هذه الأضافة كل الوظائف وكذلك القوائم Widegst لعمل مجتمع بكل سهولة ويسر وكذلك توفر خصوصية للمستخدمين وملف تعريفي لكل مستخدم ..(شخصيا لم اجرب الأضافة ولكن يبدو أنها ممتازة وتسهل العديد من الأمور وتوفر قدرة تطويعية عالية للوردبريس لجعلها شبكة أجتماعية )

yourcolor.net

13- الأضافة الثالثة عشر والأخيرة : Pretty Link
وهي اضافة خاصة بالروابط Links فأحيانا يكون هناك روابط بمدونتك تريد اختصارها وجعلها أقل طولاً وهناك مواقع تقدم خدمة اختصار الروابط (tinyurl, budurl, and bit.ly) ولكن مع هذه الأضافة يمكنك مباشرة عمل روابط جميلة ومختصرة بكل سهولة ..

yourcolor.net

معرض الوسوم