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

الووردبريس wp

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

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

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

مثال على صفحة بسيطة :

مثال على صفحة تفيدة الزائر بمعلومات مهمة :

الان سوف نتطرق لطريقة انشاء صفحة الخطاء خاصة بالنسبة للقوالب التي لا تحتوي عليها

1. ادخل الى لوحة التحكم
2. اختر المحرر من قائمة المظهر
3. تحقق من عدم وجود ملف صفحة الخطأ (اذا كان موجود فلا تقم بالخطوات التالي قم يتعديله مباشرة)
4. انشاء ملف جديد باسم 404 صيغة الملف php فارغ
5. نقوم برفعه الى مجلد القالب الذي نستعمله wp-content/themes/your-theme-name
6. قم بنسخ ولصق الكود التالى في صفحة الخطأ التي قمت بانشائها

<?php get_header(); ?>
<div id=”content”>
<h2>Error 404 – Not Found</h2>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

اول شيئ من المحرر نستعرض ملف عرض تدوينة مفردة single php لاحظ الصورة التالية :

الان نقوم بنسخ الكودين التاليين وندرجهما في كود صفحة الخطأ

<?php get_header(); ?>
<div id=”left”>
<div class=”entry”>

</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

الان من لوحة التحكم توجه الى قائمة الصفحات اضف صفحة جديدة واكتب كل ما تريد في تلك الصفحة وادرج الصور التي تريد مثال

الكود لصفحة الخطاء سوف يصبح هكذا

<?php get_header(); ?>
<div id=”left”>
<div>
<p style=”text-align: center;”><img src=”http://img638.imageshack.us/img638/6040/pagenotfound.png” border=”0″ alt=”” width=”300″ height=”289″ /></p>

<h1 style=”text-align: center;”>الصفحة غير موجودة</h1>
<p>الصفحة التي طلبتها غير موجودة، من الممكن أن يكون تم حذفها، أو تم تغيير اسمها، أو أنها غير متوفرة حاليا. رجاء قم بمحاولة ما يلي: </p>
<ul>
<li>إذا قمت بطباعة الرابط بشريط العنوان، تأكد من أنه مكتوب بشكل صحيح.</li>
<li>تصفح الصفحة الرئيسة لـ<a href=”../”>”الاكاديمية العربية”</a> للاطلاع على المعلومات والروابط التي تريدها</li>
<li>استخدم القائمة العلوية لإيجاد الرابط الذي تبحث عنه.</li>
<li>إذهب الى خريطة الموقع ربما تجد ما تريد</li>
<li>استعمل محرك البحث الخاص بالموقع</li>
</ul>

</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?></p>

فيصبح الكود بالشكل التالي :

<?php get_header(); ?>
<div id=”left”>
<div>
<p style=”text-align: center;”><img src=”http://img638.imageshack.us/img638/6040/pagenotfound.png” border=”0″ alt=”” width=”300″ height=”289″ /></p>

<h1 style=”text-align: center;”>الصفحة غير موجودة</h1>
<p>الصفحة التي طلبتها غير موجودة، من الممكن أن يكون تم حذفها، أو تم تغيير اسمها، أو أنها غير متوفرة حاليا. رجاء قم بمحاولة ما يلي: </p>
<ul>
<li>إذا قمت بطباعة الرابط بشريط العنوان، تأكد من أنه مكتوب بشكل صحيح.</li>
<li>تصفح الصفحة الرئيسة لـ<a href=”../”>”عربي ووردبريس”</a> للاطلاع على المعلومات والروابط التي تريدها</li>
<li>استخدم القائمة العلوية لإيجاد الرابط الذي تبحث عنه.</li>
<li>إذهب الى خريطة الموقع ربما تجد ما تريد</li>
<li>استعمل محرك البحث الخاص بالموقع</li>
</ul>

<p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?></p>

</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

الا سوف نقوم بادراج اضافة جميلة تقوم بالاقتراح على الزائر  روابط قريبة من صفحة الخطاء التي قام بزيارتها وهى الاضافة Smart 404

طريقة التركيب سهلة ما عليك سوى ان تفك الضغط عن الملفات وتقم برفعها الى المجلد plugins وتفعيلها من لوحة التحكم

1. Unzip the package, and upload smart404 to the /wp-content/plugins/directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Place <?php smart404_suggestions() ?> in your 404 template to list suggested posts, or see ‘Template tags’ for more information.

بعدها نقوم بإدراج الكود التالي الى صفحة الخطاء :

<h1>بعض الاقتراحات لما تبحث عنه</h1>
<?php smart404_suggestions() ?>
<br></br>

يصبح الكود النهائي بالشكل التالي :

<?php get_header(); ?>
<div id=”left”>
<div>
<p style=”text-align: center;”><img src=”http://img638.imageshack.us/img638/6040/pagenotfound.png” border=”0″ alt=”” width=”300″ height=”289″ /></p>

<h1 style=”text-align: center;”>الصفحة غير موجودة</h1>
<p>الصفحة التي طلبتها غير موجودة، من الممكن أن يكون تم حذفها، أو تم تغيير اسمها، أو أنها غير متوفرة حاليا. رجاء قم بمحاولة ما يلي: </p>
<ul>
<li>إذا قمت بطباعة الرابط بشريط العنوان، تأكد من أنه مكتوب بشكل صحيح.</li>
<li>تصفح الصفحة الرئيسة لـ<a href=”../”>”الاكاديمية العربية”</a> للاطلاع على المعلومات والروابط التي تريدها</li>
<li>استخدم القائمة العلوية لإيجاد الرابط الذي تبحث عنه.</li>
<li>إذهب الى خريطة الموقع ربما تجد ما تريد</li>
<li>استعمل محرك البحث الخاص بالموقع</li>
</ul>

<p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?></p>

<h1>بعض المواضيع المقترحة</h1>
<?php smart404_suggestions() ?>
<br></br>

</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

نهاية الشرح اتمنى ان يعجبكم الشرح وان تستفيدو منه

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

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

استبعاد صفحة من القائمة العلوية – YourColor

الووردبريس wp

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

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

طريقة الاولى للقوالب التي لا تدعم القوائم

اول شيء يجب معرفة رقم ال post تبع الصفحة وهنا سوف اقوم بشرح طريقة الحصول عليه نتوجه الى قائمة الصفحات من لوحة التحكم  وبعد ذاك نقوم بالتالي

عند وضع الماوس على رابط اي صفحة شاهد شريط الحالات اسفل سوف تشاهد رقم الصفحة  التي نحتاجها مثال

http://yoursite.com/wp-admin/post.php?post=245&action=edit

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

الان سوف نقوم بتعديل الترويسة (header.php) اول شيء ابحث عن الكود التالي في الترويسة

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>

قم بتغيره بالكود التالي :

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=&exclude=245‘); ?>

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

مثال على موقعي :

ملاحظة :

 اذا اردت ان تقوم باستبعاد العديد من الصفحات قم بالتالي

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=&exclude=page1,page2,page3‘); ?>

لاحظ كيف تم ادراج الفواصل بين كل صفحة و الاخرى

الطريقة الثانية للقوالب التي تدعم القوائم

هذه القوالب بطبيعة الحال تدعم القوائم وستجد انهم استعملوا كود برمجي عوض عن الكود الذي اشرنا له فوق وغالبا ما يكون على الشكل التالي

<?php wp_nav_menu( array(´container´ => ´´, ´container_class´ => ´´, ´menu_class´ => ´´, ´sort_column´ => ´menu_order´, ´theme_location´ => ´secondary´ ) ); ?>

في هذه الحالة لن نقوم بتغيير اي شيء في هذا الكود فقط سنقوم بالخطوات التالية :

نتوجه الى القوائم من قائمة المظهر :

 

بعدها نقوم بانشاء قائمة قم باعطائها اي اسم :

بعد انشاء القائمة سوف تظهر لك المربع الجانبي التالي :

هنا المربع يحتوي على الامكان التي تستعمل القوائم مثلا اختر المكان main menu واختر بعدها اسم القائمة التي قمت بانشائها وقم بالحفظ, المهم الان ستجد في الاسفل مربعين اختر اما التصنيفات او الصفحات المهم قمت باخد المربع الخاص بالتصنيفات وهو بالشكل التالي:

المهم هنا نقوم بوضع علامة على التصنيفات التي نود ظهورها في القائمة وبالعكس بالنسبة لتصنيفات التي تود استبعادها وقم بالضغط على اضف للقائمة

المهم هنا سوف تلاحظ اضافة التصنيفات التي اردتها ان تظهر فقط في القائمة لا تنسى ان تقوم بحفظ القائمة

الى هنا انتهينا من شرح هذه الطريقة البسيطة والى اللقاء في شروحات اخرى واتمنى ان تستفيدوا من هذا الشرح

اذا كانت هناك اي مشاكل او استفسارات قم وضع تعليق وسوف اجيب عليك ان شاء الله في اقرب فرصة

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

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

استبعاد تصنيف من الصفحة الرئيسة – YourColor

الووردبريس wp

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

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

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

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

اضف الكود التالي :

function exclude_category($query) {
if ( $query->is_home ) {
$query->set(´cat´, ´-xx´);
}
return $query;
}
add_filter(´pre_get_posts´, ´exclude_category´);

حيث أن –xx هو رقم التصنيف الذي نريد استبعاده لاحظ العلامة ناقص ضروري ان تقوم باضافتها

إستبعاد تصنيفات متعددة

الطريقة ايضا سهلة فقط قم باضافة رقم التصنيفات التي تريد أن تقوم بإستبعادها مثال

$query->set(´cat´, ´-1 -2 -3 -4 -5´);

إستبعاد تصنيفات من الأرشيف

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

if ( $query->is_archive ) {

أما إذا كنت تريد استبعاد التصنيف من الصفحة الرئيسية و الأرشيف معا استعمل الاستعلام التالي

if ( $query->is_home ¦¦ $query->is_archive) {

اذا كانت هناك اي مشاكل او استفسارات قم بوضع تعليق وسوف اجيب عليك ان شاء الله في اقرب فرصة

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

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

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

وورد بريس wp

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

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

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

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

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

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

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

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

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

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

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

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

مصغرات الصور و سكريبت TimThumb في الووردبريس – YourColor

وورد بريس wp

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

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

تحميل سكريبت TimThumb

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

اولا نقوم بتحميل اخر اصدار من السكريبت من هنا  او من هنا ورفعه الى مجلد القالب الذي تستعمل

http://sitename.com/wp-content/themes/your-theme-name/timthumb.php

لا تقم بتغيير اي شيئ في هذا الملف فقط قم برفعه الى مجلد القالب الذي تستعمل

اضافة تنسيق لسكريبت TimThumb

هنا سوف نضيف تنسيق لسركيبت TimThumb لعرض الصور بشكل متناسق مع التدوينة وفي المكان الذي تريد يمين يسار فقط

وهذا كود التنسيق نضيفه الى ملف التنسيق (style.css) للقالب :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}

بالنسبة لهذا التنسيق الزوايا ذات استدارة بسيطة اما اذا رغبت في ان تأخد الزوايا شكل طبيعي فقم بإستعمل التنسيق التالي :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
}

ادراج سكريبت TimThumb في القالب :

نفتح ملف الصفحة الرئيسية لقالب (index.php) ونبحث عن وسم العنوان غالبا ما يكون الكود على هذا الشكل :

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="الرابط الدائم لـ <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

حتى نبسط الامر عليك ابحث فقط على الكود التالي :

<?php the_permalink() ?>

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

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

<?php if( get_post_meta($post->ID, "thumb", true) ): ?>
<div class="homethumb"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo(´template_directory´); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> </div>
<?php else: ?>
<?php endif; ?>

او بمعنى أخر نقوم بوضع الكود قبل الكود التالي مباشرة :

<?php the_content(); ?>

ولا تنسى تعديل التنسيق (homethumb) على حسب ما يناسب القالب الطول والعرض والهوامش حتى يتم ادراج الصورة المصغر بشكل انيق وملائم في القالب

ملحوظة : في كود ادراج سكريب TimThumb اذا لاحظت جيدا سترى انه يوجد قيمتين لطول والعرض ولا تنسى تنسيق الطول والعرض كذالك لسكريبت (TimThumb) في ملف التنسيق (style.css)

مثال للقيمتين :

h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="100"

القيمة الاولى : h=150&w=150&zc=1
القيمة الثانية : width=”100″ height=”100″

انشاء مجلد الكاش

في هذه المرحلة ضروري انشاء مجلد في قالب المجلد ليشتغل السكريبت بشكل سليم على هذا الشكل :

http://sitename.com/wp-content/themes/your-theme-name/cache/

بعد انشاء المجلد قم باعطائه التصريح 777 عن طريق ftp او لوحة التحكم الموقع (cpanel) مثلا

طريقة استعمال الصور المصغرة

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

الان يجب اضافة حقل مخصص في الخصائص الاضافية هكذا :

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

الى هنا نكن قد انتهينا من طريقة ادراج الصور المصغرة بواسطة السكريبت والى اللقاء في تدوينة جديدة انشاء الله

اذا كان هناك اي استفسار يرجى وضع تعليق

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

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

صفحة الأرشيف للووردبريس – YourColor

الووردبريس wp

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

في هذه التدوينة سنتحدث عن طريقة انشاء قالب لصفحة الأرشيف والتي تسهل على زوار المدونة تصفح التدوينات

اول شيئ نفتح ملف جديد باسم archives.php وقم التحقق من مجلد القالب اذا كان يحتوي على ملف بنفس الاسم واذا وجدت ملف بهذا الاسم قم بتسميته archive-page.php

نفتح الملف باي محرر مثل notepad + او editplus نضيف اسم قالب الصفحة لكي يتعرف الووردبريس على الصفحة الجديدة

<?php
/*
Template Name: archives
*/
?>

class=”brush:html”>لكي يكتمل الشرح ضروري نشتغل على قالب اخترت هذا القالب Cyangant الان قم بفتح ملف نماذج الصفحات (page.php) وانسخ الكود كامل وقم بلصقه في الملف الذي قمنا بانشائه ولا تنسى تحويل ترميز الملف الى UTF-8 لكي تظهر الحروف العربية بشكل سليم وهكذا يصبح الكود :

<?php
/*
Template Name: archives
*/
?>

<?php get_header(); ?>

<div id="content">

<?php breadcrumbs(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-text"><h2 class="post-title"><?php the_title(); ?></h2></div>
<?php the_content(´<p class="serif">Read the rest of this page &raquo;</p>´); ?>
<?php wp_link_pages(array(´before´ => ´<p><strong>Pages:</strong> ´, ´after´ => ´</p>´, ´next_or_number´ => ´number´)); ?>
<?php edit_post_link(´<span class="entry-edit">تحرير هذه التدوينة</span>´); ?>

<?php endwhile; endif; ?>

<p class="post-share">
<strong>إذا اعجبتك التدوينة ، فلا تنسى مشاركتها مع اصدقائك : </strong>
<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" class="digg" title="Digg it"></a>
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="StumbleUpon" class="stumbleupon"></a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Facebook" class="facebook"></a>
<a href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Twitter" class="twitter"></a>
<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="del.icio.us" class="delicious"></a>
<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=<?php the_permalink();?>title=<?php echo urlencode(get_the_title($id)); ?>" title="Google" class="google"></a>
<a href="http://bookmarks.yahoo.com/toolbar/savebm?u=<?php the_permalink(); ?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Yahoo!" class="yahoo"></a>
<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Reddit" class="reddit"></a>
</p>
</div><!-- END Post -->

</div><!-- END Content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

الان قم بحذف الكود التالي :

<?php the_content(´<p class="serif">Read the rest of this page &raquo;</p>´); ?>

class=”brush:html”>او
class=”brush:html”><?php the_content(); ?>
class=”brush:html”>على حسب القالب الذي تشتغل عليه وضع مكانه الكود التالي :
class=”brush:html”><?php

$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;

$myposts = get_posts(´numberposts=-1&orderby=post_date&order=DESC´);

?>

<?php foreach($myposts as $post) : ?>

<?php

setup_postdata($post);

$year = mysql2date(´Y´, $post->post_date);
$month = mysql2date(´n´, $post->post_date);
$day = mysql2date(´j´, $post->post_date);

?>

<?php if($year != $previous_year ¦¦ $month != $previous_month) : ?>

<?php if($ul_open == true) : ?>
</ul>
<?php endif; ?>

<h3><?php the_time(´F Y´); ?></h3>

<ul>

<?php $ul_open = true; ?>

<?php endif; ?>

<?php $previous_year = $year; $previous_month = $month; ?>

<li><span><?php the_time(´j F´); ?> – </span> <span><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></span></li>

<?php endforeach; ?>
</ul>

الان يصبح الكود كاملا على الشكل التالي :

<?php
/*
Template Name: archives
*/
?>

<?php get_header(); ?>

<div id="content">

<?php breadcrumbs(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-text"><h2 class="post-title"><?php the_title(); ?></h2></div>
<?php

$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;

$myposts = get_posts(´numberposts=-1&orderby=post_date&order=DESC´);

?>

<?php foreach($myposts as $post) : ?>

	<?php

	setup_postdata($post);

	$year = mysql2date(´Y´, $post->post_date);
	$month = mysql2date(´n´, $post->post_date);
	$day = mysql2date(´j´, $post->post_date);

	?>

	<?php if($year != $previous_year ¦¦ $month != $previous_month) : ?>

		<?php if($ul_open == true) : ?>
		</ul>
		<?php endif; ?>

		<h3><?php the_time(´F Y´); ?></h3>

		<ul>

		<?php $ul_open = true; ?>

	<?php endif; ?>

	<?php $previous_year = $year; $previous_month = $month; ?>

	<li><span><?php the_time(´j F´); ?> - </span> <span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>

<?php endforeach; ?>
	</ul>
<?php wp_link_pages(array(´before´ => ´<p><strong>Pages:</strong> ´, ´after´ => ´</p>´, ´next_or_number´ => ´number´)); ?>
<?php edit_post_link(´<span class="entry-edit">تحرير هذه التدوينة</span>´); ?>

<?php endwhile; endif; ?>

<p class="post-share">
<strong>إذا اعجبتك التدوينة ، فلا تنسى مشاركتها مع اصدقائك : </strong>
<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" class="digg" title="Digg it"></a>
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="StumbleUpon" class="stumbleupon"></a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Facebook" class="facebook"></a>
<a href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Twitter" class="twitter"></a>
<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="del.icio.us" class="delicious"></a>
<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=<?php the_permalink();?>title=<?php echo urlencode(get_the_title($id)); ?>" title="Google" class="google"></a>
<a href="http://bookmarks.yahoo.com/toolbar/savebm?u=<?php the_permalink(); ?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Yahoo!" class="yahoo"></a>
<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Reddit" class="reddit"></a>
</p>
</div><!-- END Post -->

</div><!-- END Content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

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

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

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

كما تلاحظ في المثال يجب حذف الأشياء مثل حرر هذه التدوينة وا اذا اعجبتك هذه التدوينة مع كثرة الشروحات سوف تتحترف تعديل القوالب

لتحميل الاكواد المستعملة في الشرح من هنا

الى هنا نكن قد انتهينا من طريقة انشاء صفحة الأرشيف للووردبريس والى اللقاء في تدوينة جديدة انشاء الله

اذا كان هناك اي استفسار يرجى وضع تعليق

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

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

استخدام Google App Engine مثل YourColor – CDN

الووردبريس wp

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

محرك تطبيقات جوجل (Google App Engine) هو نظام جوجل الأساسي لتطوير التطبيقات واستضافتها. وللمعرفة المزيد قم بزيارة الصفحة الرئيسية Google App Engine. ما يهمنا في الخدمة هو استعمالها مثل خدمة توصيل المحتوى CDN فكا تعلمون سيرفرات جوجل تكون قوية وسريعة فلماذا لا نقوم باستغلالها و ساتطرق الى خطوات تحويل هذه الخدمة الى CDN بالتفصيل

معلومة بسيطة الخدمة تسمح لك فقط بعرض 5 مليون صفحة في الشهر و 5GB مساحة. عند انتهاء هذا العدد من ظهور الصفحات سيتم ايقاف عرض صفحاتك هذه الخدمة ينصح بها لاصحاب المدونات الصغيرة فقط من وجهة نظري

انشاء حساب Google App Engine

بالنسبة لانشاء حساب في خدمة Google App Engine  كل ما تحتاجه هو حساب Gmail وقم بتسجيل من الصفحة التالية Google App Engine  ثلات خطوات فقط اتبع الصور التالية :

انشاء تطبيق في Google App Engine

بعد انشاء الحساب وذالك بتسجيل الدخول بواسطة حسابك gmail سيتم عرض عليك صفحة انشاء تطبيق جديد

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

بعد التفعيل سيتم عرض الصفحة التالية :

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

http://yourcolor.appspot.com

بالنسبة للعنوان اكتب ما تشاء ولا تنسى ان تقوم بالموافقة على شروط الخدمة بعد قرائتها هذا ان كان لديك وقت لقرائتها المهم اضغط على انشاء التطبيق لكي ننتهي من هذه الخطوة  بعد ذالك سننتقل الى المرحلة التالية

تحميل وتركيب Google App Engine SDK و Python 2.5

في هذه المرحلة سنحتاج اولا تركيب Python وبالتحديد النسخة 2.5 او ما فوقها, لانها من متطلبات تشغيل Google App Engine SDK وطريقة التركيب سهلة بطبيعة الحال next الى اخره

لتحميل النسخة 2.5.6 يرجى زيارة الصفحة التالية : Python Download Page

ثانيا نقوم بتركيب Google App Engine SDK والذي سنحتاجه فيما بعد لرفع احد المشاريع التي ستساعدنا في هذا الشرح المهم طريقة التركيب بسيطة كالعادة في ويندوز نقوم next الى اخره

لتحميل النسخة 1.5.3 يرجى زيارة الصفحة التالية : Download Google App Engine SDK for Python

قبل الانتقال الى المرحلة يجب تركيب اولا Python  وبعد ذالك قم بتركيب Google App Engine SDK هذه الخطوة مهمة لكي تضمن اعداد CDN بشكل جيد

اضافة اسم نطاق خاص بنا ل Google App Engine

هذه الطريقة فقط اذا كنت تريد ان يظهر اسم موقع في التطبيق عوضا عن الرابط المقدم من طرف الخدمة مثال بسيط :

الرابط في الحالة العادية يكون بالشكل التالي :

http://yourcolor.appspot.com 

سنقوم بتغيره الى :

           http://cdn.yourcolor.com

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

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

الان بعد قمت بانشاء التطبيق قم بالضغط عليه كما في الصورة لننتقل الى لوحة تحكم التطبيق

من القائمة الموجودة على اليسار انزل الى الاسفل وبالتحديد من قائمة Administration قم بالضغط على Application settings

في الاسفل ستجد خيار Domain setup كما مبين في الصورة اضغط عليه اضغط عليه

الان يجب عليك ان تشترك في خدمة تطبقات جوجل. الخدمة الاولى كانت فقط الاشتراك في محرك التطبيقات وهناك فرق بينهما لان ادخل في شرح هذا الفرق لانه سيطول الشرح اكثر من اللازم . اضغط على Sign up For Google App

كما في الصورة قم بادخال اسم نطاقك الرئيسي ولا تقم باضافة النطاق الفرعي لكي تقع في مشاكل تغيير Cname كما حصل معي واضطررت الى حذف التطبيق واعادة الطريقة مرة اخرى من الاول المهم بعدها ستنقل الى الصفحة التالية :

املاء البيانات بما ينسبك بالنسبة للبريد استعمل الذي قمت بادخاله عند اشتراك في خدمة محرك تطبيقات جوجل Google App Engine بالنسبة لنوع قم بادخال غير ربحي . الان بعد اتمام البيانات سيتم نقل الى الصفحة التالية :

هنا يجب عليك الانتباه قليلا لانه سيتم انشاء حساب المشرف لتطبيقات جوجل ببريد جديد ستحتاجه لهذا لا تنسى ان تحفظ هذا الحساب في مفكرة مع الباسوورد . البريد يكون بالشكل التالي :

data@yourcolor.net

كل ما عليك الان هو ادخال اسم المستخدم مع كلمة مرور والموافقة على الشروط لكي ننتقل الى الصفحة التالية

هنا سنقوم بتغير الحساب الى الحساب الذي قمنا بانشاءه من جديد بعدها تنتقل تلقائيا  الى الصفحة التالية :

المهم هنا قم بالضغط على تنشيط Google App لكي ننتقل الى صفحة اثبات الملكية :

الان قم بتحميل الملف من جوجل كما في الصورة وارفعه بواسطة ال FTP او Cpanel الى مجلد موقعك الرئيسي و قم بتصفحه لكي ترى اذا تم رفعه ام لا وبعد ذالك قم بتاكيد الملكية

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

الان سنقوم بالدخول الى لوحة تحكم محرك تطيقات جوجل الاول وليس تطبيقات جوجل لكي ابين لك فرق بسيط بينهما لكي لا تتوه بين الخدمتين

1. Google App Engine : نستعمل البريد Gmail العادي
2. Google Apps : نستعمل بريد باسم نطاقك webmaster@sitename.com

هذا فرق بسيط بين الخدمتين

المهم بعد تسجيلك الخروج من لوحة تكم تطبيقات جوجل قم بزيارة رابط تطبيقك على Google App Engine

http://%5Byour-application%5D.appspot.com

وسجل الدخول بالبريد العادي gmail ومن لوحة تحكم التطبيق من القائمة الموجودة باليسار توجه الى الاسفل Administration ثم Application Settings وبعدها Domain Setup كما فعلنا في الاول

الان قم باضافة النطاق بعدها سننتقل الى صفحة تسجيل دخول Google Apps

كما قلنا سابقا البريد الخاص بنطاقك الذي قمنا بانشائه في الخطوات السابقة عند التسجيل في خدمة Google Apps قم بتسجيل الدخول باسم المسخدم وستنتقل تلقائيا الى الصفحة التالية :

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

اضغط على اضافة عنوان URL جديد قم باضافة اسم نطاق فرعي مثلا cdn

بعد اضافة النطاق الفرعي ستظهر لك رسالة بالشكل التالي :

تغيير سجل CNAME

لاستخدام عنوان URL cdn.free-themes-wordpress-arabic.cz.cc المخصص، يجب عليك تغيير سجل CNAME بواسطة مضيف نطاقك.

تسجيل الدخول إلى خدمة استضافة نطاقك.

انتقل إلى صفحة إدارة خدمة اسم النطاق (DNS). يختلف موقع واسم هذه الصفحة حسب المضيف، ولكن يمكن العثور عليها بشكلٍ عام في إدارة النطاق أو الإعدادات المتقدمة.

ابحث عن إعدادات CNAME ثم أدخل الآتي كقيمة أو اسم مستعار CNAME:

cdn

قم بضبط جهة CNAME على العنوان التالي:

ghs.google.com

احفظ التغييرات مستعينًا بمضيف النطاق الخاص بك وانقر فوق “لقد أكملت هذه الخطوات” أدناه.

عند الانتهاء، انقر فوق” لقد أكملت هذه الخطوات” لكي تقوم Google بفحص سجل CNAME.

لا تقم بالضغط على ” لقد أكملت هذه الخطوات” حتى نقوم بالخطوة التالية :

هنا ساضع الطريقة من خلال Cpanel قم بتسجيل الدخول الى لوحة تحكم وبعدها اختر Simple DNS zone Editor كما في الصورة التالية

بعدها استعمل اسم النطاق الفرعي الذي قمت بادراجه في اعدادات التطبيق كما في الصورة السابقة الان بعد اختيارك Simple DNS zone Editor اضف النطاق الفرعي اخاص بك كما في الصورة التالية واضغط Add CNAME Record

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

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

ملاحظة بالنسبة لنطاق الفرعي قد تستغرق مدة تحديث DNS مدة 24 ساعة

تركيب CirruxCache وشرح الاعدادات الازمة

الحمد لله لانه يوجد هذا المشروع CirruxCache للمبرمج Samuel Alba جزاه الله عن كل خير والمشروع يقوم بتوفير خدمة التخزين المؤقت للملفات الثابة على محرك تطبيق جوجل GAE وقد اختصر لنا بهذه الفكرة الكتير من العمل الشاق والتقليدي عندما تريد رفع ملفات ثابة الى Google App Engine في الحقيقة يوفر الكتير من العمل عن تجربتي الشخصية واعدادته سهلة ومن مميزاته انك تقوم بتركيبه وهو يقوم بالبحث في موقع عن الملفات التي تستعمل ويقوم باعادة توجيه الى التطبيق الخاص بك مثالا لو تم طلب الملف التالي :

http://yourcolor.net/wp-content/themes/themeNmae/style.css

سيتم عرض الملف (style.css) من التطبيق الخاص بنا في Google App Engine وليس فقط ملفات التنسيق بل كل الملفات الثابثة وحتى ملفات الفيديو

http://yourcolor.appspot.com/wp-content/themes/themeNmae/style.css

وبهذه الطريقة سيتم عرضه بسرعة من سيرفرات جوجل والتي تتميز بالمرونة والسرعة

واذا استعملت النطاق الفرعي ستعرض بهذه الطريقة :

http://cdn.yourcolor.net/wp-content/themes/themeNmae/style.css

وهذه بعض المعلومات عن ما يقوم به المشروع cirruxcache وهي كالتالي :

1. honor Cache-Control
2. cache TTL override
3. several POP (Point Of Presence) configuration mapped on custom base-url
4. ignore query string
5. POST forwarding
6. garbage collection of expired entries
7. extensibility (develops your own WebServices on top)
8. allow object flushing from restricted IP
9. configure a POP (Point of Presence) according to a virtual host
10. several behaviors (cache, redirect, forward)
11. storage WebService (store big files <=2GB in order to be delivered)
12. admin panel (flush objects, manage big files, statistics, config helper)
13. image transformation (before caching it)

تحميل و اعداد CirruxCache

لتحميل المشرع كل ما عليك هو زيارة هذه الصفحة CirruxCache Downloads وقم بتحميل اخر نسخة

بعد تحميل النسخة قم بفك الضغط عنها وانسخ المجلد بالكامل الى المجلد الخاص ب Google App Engine SDK الذي قمنا بتنصيبه من قبل انا قم بتنصيبه في مجلد Programe Files لاحظ الصورة التالية :

ولاحظ مسار ملفات ومجلدات المشروع كيف قمت بوضعها في مجلد CirruxCache لكي لا تقع في مشاكل كما صادفتني من قبل

افتح الان ملف app.yaml لتغيير اسم التطبيق بالنسبة لشرح في الصورة الاولى عندما قمنا باختيار اسم التعريف لتطبيق كان الاسم cdn-mwp وانا في اخر الشرح ستجدني اسعملت cdnmwp لا تنظر الى الاسماء التي استعملها انا لانني قمت بتجريب الطريقة مرتين واخدت الصور مختلفة لشرح في ما يخص اسم  التطبيق الذي انشئته المهم قم بتغير اسم التطبيق في الملف الى اول اسم استعملته كما في الصورة الاولى في الشرح

application: appname

قم بتغيير السطر 19 فقط الى اسم تطبيقك

المهم الان سننتقل الى اعداد ملف config.py ل CirruxCache الملف ستجده داخل المجلد قم بفتحه باي محرر نصوص مثلا notepadd++ وقم بتغير الكود التالي :

urls[´default´] = (
#´(/debug/.*)´, ´Debug´,
´(/data/.*)´, ´config.Static´,
´/www(/.*)´, ´config.Www´
)

الى

urls[´default´] = (
´(/wp-content/.*)´, ´config.Static´,
´(/wp-includes/.*)´, ´config.Static´,
´/(.*)´, ´config.Www´
)

في هذه الحالة سيتم عرض جميع الملفات الثابة المخزنة في Google App Engine وبالتحديد الموجودة في المجلدين اللذين قمنا بتغييرهما wp-content و wp-includes بالنسبة لمستعملي ووردبريس

وايضا سنقوم بتغيير الكود التالي الخاص باعادة التوجيه والتخزين من :

class Static(cache.Service):
origin = ´http://static.mydomain.tld´
maxTTL = 2592000 # 1 month
ignoreQueryString = True

class Www(cache.Service):
origin = ´http://www.mydomain.tld´
allowFlushFrom = [´127.0.0.1´]
forceTTL = 3600 # 1 hour
ignoreQueryString = True
forwardPost = False

الى الكود التالي :

class Static(cache.Service):
origin = ´http://sitename.com´
forceTTL = 2592000 # 1 month
allowFlushFrom = [´127.0.0.1´]
ignoreQueryString = True
forwardPost = False
headerBlacklist = [´Set-Cookie´]

class Www(redirect.Service):
origin = ´http://sitenam.com´

المهم هنا قم بتغير sitename.com الى اسم نطاقك الرئيسي وليس الفرعي لكي لا تقع في مشكلة. احفظ الملف وسننتقل الخطوة التالية وهي رفع المشروع CirruxCache بعد التعديل الذي قمنا به الى التطبيق الخاص بنا بواسطة Google App Engine Launcher

الان قم بتشغيل Google App Engine Launcher

يمكن تغيير رقم البورت اذا كان مشغولا او كنت تسعمل جهازك كبروكسي لشبكة او اي استعمال اخر المهم انه يمكنك تغييره

تصفح مكان تواجد تطبيق CirruxCache بواسطة Google App Engine Launcher وقم باضافته بعدها سنقوم بالتالي ضع الفأرة على اسم التطبيق واضغط على Deploy كما في الصورة التالية :

بعد الضغط على Deploy قم بادخال بريدك وكلمة المرور وستظهر لك نافديتين واحدة سوداء والاخرى بيضاء (التفاصيل هههههه احكي قصة)

المهم واحدة تجد في رسالة بهذه الشكل :

2011-08-21 00:18:55 Running command: “[‘C:\Python25\python.exe’, ‘-u’, ‘C:\Program Files\Google\google_appengine\appcfg.py’, ‘–no_cookies’, u’–email=xxxxx@gmail.com’, ‘–passin’, ‘update’, u’C:\Program Files\Google\google_appengine\CirruxCache’]”
Application: name-of-your-application; version: 1
Host: appengine.google.com

Starting update of app: name-of-your-application, version: 1
Scanning files on local disk.
2011-08-21 00:19:19,427 WARNING appengine_rpc.py:435 ssl module not found.
Without the ssl module, the identity of the remote host cannot be verified, and
connections may NOT be secure. To fix this, please install the ssl module from
http://pypi.python.org/pypi/ssl .
To learn more, see http://code.google.com/appengine/kb/general.html#rpcssl .
Password for xxxx@gmail.com: Cloning 4 static files.
Cloning 39 application files.
Compilation starting.
Compilation completed.
Starting deployment.
Checking if deployment succeeded.
Will check again in 1 seconds.
Checking if deployment succeeded.
Will check again in 2 seconds.
Checking if deployment succeeded.
Deployment successful.
Checking if updated app version is serving.
Completed update of app: cdnmwp, version: 1
Uploading index definitions.
Uploading cron entries.
2011-08-21 00:19:50 (Process exited with code 0)

You can close this window now.

الان انتهينا من رفع تطبيق المشروع CirruxCache ال Google App Engine لكي تتأكد من ان الخدمة اصبحت جاهزة قم تجربت اي ملف من موقعك مثلا لدينا الصورة التالية :

http://yourcolor.net/wp-content/themes/1biztheme/images/ajax-loader.gif

نقوم بتجربتها هكذا :

http://localhost:8080/wp-content/themes/1biztheme/images/ajax-loader.gif

اذا ظهرت الصورة فالاعدادات لديك سليمة اي سننتقل الى الخطوة الاخيرة

تغيير روابط القالب والاضافات

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

WP Super Cache

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

CDN Linker lite

وتوجد ايضا هذه الاضافة في حالة لم تكن تستعمل WP super Cache تقوم ايضا بتغير رابط المدونة لجميع الملفات الموجودة في wp-content و wp-includes لم اجرب الاضاة من قبل وهذا رابط صفحتها على موقع WordPress.org

صفحة الاضافة CDN Linker lite

خاتمة

الى هنا  نكون قد انتهينا من الشرح التفصيلي لاستخدام استخدام Google App Engine مثل CDN . واتمنى ان تستفيدوا منه واذا كان هناك اي استفسار او نقص في الشرح يرجى وضع تعليق ؟

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

مشكلة تكرار الوصف في محركات البحث – ووردبريس – YourColor

الووردبريس wp

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

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

ملاحظة بسيطة محركات البحث تعتمد على الميتا (Meta) التاليين :

content و keywords  الموجودة في سورس كود الخاصة بالصفحة وايضا لا ننسى العنوان ايضا (title) لعرضها في صفحات البحث يمكن القول ايضا انها نبدة تعريفية عن الصفحة وما تحتويه لمحركات البحث  وغالبا ما تكون بالترتيب التالي :

<meta name="description" content="" />
<meta name="keywords" content="" />
<title></title>

المشكلة

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

المهم بعد حفظ الاعدادات قم بتصفح الموقع وافتح اي تدوينة بعدها كليك يمين واختر مشاهدة السورس كود الخاص بالصفحة مثلا :

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

<meta name="description" content="<?php echo get_option(´seo1´); ?>" />
<meta name="keywords" content="<?php echo get_option(´seo2´); ?>" />

السطرين المختصين في الوصف والكلمات المفتاحية ستجدهما في ملف الترويسة (header.php) ويختلفان من قالب الى اخر وليس بالضرورة ان يكون بنفس الكود الموضح اعلاه والاختلاف دائما يكون كما هو موضح في السطرين التالين :

<meta name="description" content="الاختلاف بين القوالب هنا" />
<meta name="keywords" content="الاختلاف بين القوالب هنا" />

الحل

لحل هذه المشكلة ستضطر الى حذف السطرين كي تتجنب مشكلة التكرار. لكن في هذه الحالة يجب عليك تركيب اضافة مثل all in one seo pack ليتم التحكم الكامل في الوصف والكلمات المفتاحية بشكل كامل

خاتمة

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

اذا كان هناك اي استفسار يرجى وضع تعليق

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

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

اضافة لإرسال تنبيه على التعليق – Yourcolor

 الووردبريس wp

مثال على الاضافة

في اسفل الصفحة اسفل صندوق التعليقات

صورة للوحة تحكم الاضافة

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