تصميم مواقع | خامات تصميم | برمجيات | 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/

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

 انتهى الدرس 

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

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

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

في البداية أضف الكود التالي في ملف 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 للقسم او التصنيف كما يمكنك تغيير الرقم خمسة ليظهر لك العدد الذي تريده من المواضيع . يمكنك استخدام هذا الكود أكثر من مرة لصنع صفحة تحتوي على المواضيع من جميع الأقسام مما يجعلها كالأرشيف.

اضافات اسلاميه لمدونتك – yourcolor

اضافات اسلاميه لمدونتك

yourcolor.net

yourcolor.net

yourcolor.net
وجدت في احد المواقع الاسلاميه اكواد جميله
1-اضافة التقويم الهجري
2-اضافة تحويل من التقويم الهجري الى الميلادي او العكس
3-اضافة البحث في المواقع الاسلاميه
4-اضافة اوقات الصلاة اليوميه
5-بنرات اسلاميه
وغيرها الكثير
لمشاهدة الاكواد

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

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

yourcolor.net

yourcolor.net

yourcolor.net

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

<!-- contents -->

طلب بلوك من ملف 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();
?>

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

هنا

معرض الوسوم