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

 الووردبريس wp

افتح الفوتوشوب..صفحة جديدة 900X1100
العرض:(900) بيكسل الارتفاع:(1100) بيكسل (ملاحظة..اختيار الالوان راجعلك)
اعمل لير جديد حدد 25 بيكسل باستخدام اداة الrectangle
واختار gradient tool انا اخترت هذه الالوان (# 39a4ff)
و (# 114dff) اسحب من اعلى التحديد الى اسفله لتصبح في هذا الشكل

والآن حدد 200 بيكسل كما في الصورة

الالوان المستخدمة
# 434343
و
#000000
نسوي شعار بسيط

نسوي فورم البحث
باستخدام اداة الrectangle
نعمل كما في الشكل

مرة اخرى..بإستخدم اداة الrectangle
نرسم مستطيل بعرض الصفحة تحت الهيدر بارتفاع 50 بيكسل

ونطبق نفس الاعدادت

نرسم خط ابيض بعرض 1 بيكسل تحت القائمة
بالضغط على shift والسحب من اليمين الى اليسار او العكس
ونلون الخلفية باللون # e6e6e6
شوف كيف راح تظهر

نرسم خط آخر فوق الخط الابيض باللون # 797979 بعرض 1 بيكسل
لاحظ الصورة

ارسم خط بهذا الشكل

ومن ثم الذهاب الى filter>>blur>>motion blur

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

طيب نيجي لمحتوى المقالات
بأداة الrectangle .. حدد الاخيار fixed size
الارتفاع :225
العرض:600
حدد مساحة كما في الصورة..ولونها بأي لون

وطبق الخيارات التالية

تكون عندنا مستطيل رائع بهذا الشكل

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

الآن نسوي العمود الجانبي
بنفس اداة الrectangle
حدد المساحة..وسوي نفس الاعدادات اللي سويناها في المستطيل اللي في الاعلى
واعمل التالي

واخيرا
الفوتر

راح يكون بسيط..
فقط باستخدام الrectangle
سوي مثل هذا الفوتر
انا استخدمت نفس الوان الهيدر…واستخدمت نفس الاعدادات blending options

بذلك نكون انتهينا من الفوتوشوب

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

9 خطوات لنقل مدونتك الى نطاق جديد – YourColor

 الووردبريس wp

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

 

1.تصدير جميع التدوينات.

نقل المدونة

• احفظها في أي مكان ليتسنى لك الرجوع اليها في المستقبل
• تحميل ملف wp-content وحفظه على جهازك – تحميل ملف robots.txt (سيتم رفعهما على النطاق الجديد)
• نزل الووردبريس على النطاق الجديد
• ارفع الملفات التي حفظناها في الخطوة رقم 2
• استورد جميع التدوينات التي حفظناها في الخطوة رقم واحد

نقل المدونة

فعل القالب والاضافات

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

• تأكد من جميع الخيارات أنها تطابق الخيارات في النطاق القديم.
• نزل اضافة update URL’s حتى تعدل جميع الروابط لديك

9.تطبيق تقنية اعادة التوجيه 301

في النطاق القديم..افتح ملف .htaccess

امسح جميع محتوياته واكتب التالي :

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^(www.)?yourcolor.net
RewriteRule (.*) http://www.yourcolor.net/$1 [R=301,L]

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

كيفية إضافة صورة بارزة لـ ووردبريس yourcolor – thumbnail

 الووردبريس wp

ابحث عن الكود الذي يبدأ بـ

php if (have_posts()) : ?>
?php while (have_posts()) : the_post();?>
?php endwhile; ?>

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

<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" width="200" height="130"/>

حيث أنك تستطيع أن تتحكم في مقاس الصورة عن طريق زيادة أو نقصان في الارتفاع أو العرض height & width

حسناً، كيف سنختار الصورة البارزة للمقالة؟ وكيف سنضيفها؟؟

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

شاهد الصورة :

في خانة الاسم نكتب :Thumbnail
في خانة القيمة: نضع رابط الصورة

سوف نحتاج لتنسيق الصورة قليلاً
تستطيع أن تضيف كلاس خاص بالصورة

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

<img class="articlepic" src="<?php echo ge

t_post_meta($post->ID, "Thumbnail", true);?>" width="200" height="130"/>

ثم نذهب لملف الستايل

ونضيف الكلاس :

.articlepic  {
border:2px solid black; \تأطير أسود للصورة
float:left; \ عائمة لليسار

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

كيفية ربط المدونة مع الفيسبوك – YourColor

 الووردبريس wp

باتت تقنية التغذية RSS من أهم مقومات مواقع الويب التي تُحدث يومياً
لذا، اليوم سنشرح عن كيفية ربط مدونتك بالفيسبوك
عند طرح أي تدوينة جديدة، سيقوم البرنامج بارسالها الى الفيسبوك تلقائياً

الخطوة الأولى (ربط المدونة بالفيسبوك)

ذهب الى الفيسبوك وإبحث عن RSS Grafitti

الخطوة الثانية (تثبيت برنامج RSS Graffiti)

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

1.ضع رابط التغذية الخاصة بموقعك
2.اسم الموقع

ومن ثم اضغط save في الأعلى

بهذه الطريقة البسيطة
تم ربط مدونتك مع الفيسبوك باستخدام RSS Graffiti
أي تدوينة جديدة تنشرها، سيتم نشرها على الفيسبوك تلقائياً

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

كيفية تغيير عنوان المدونة – Yourcolor

الووردبريس wp

عنوان المدونة لا يظهر :

في هذا الموضوع، سنشرح عن كيفية تغيير اسم المدونة في أي قالب ووردبريس
من لوحة التحكم،
اذهب الى المظهر > محرر > الترويسة header.php

ابحث عن الوسم :

<title>

وامسح جميع مابداخله

حتى تصل الى وسم الاغلاق :

<title/>

واكتب الاسم الذي تريد ان يظهر بإسم المدونة

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

كيفية عمل شريط ترقيم الصفحات – YourColor

الووردبريس wp

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

<?php

global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, ´?´) ¦¦ ! $wp_rewrite->using_permalinks()) {
	$paginate_format = ´´;
	$paginate_base = add_query_arg(´paged´, ´%#%´);
} else {
	$paginate_format = (substr($paginate_base, -1 ,1) == ´/´ ? ´´ : ´/´) .
	user_trailingslashit(´page/%#%/´, ´paged´);;
	$paginate_base .= ´%_%´;
}

echo ´<div class="pagenavi">´. "n";
echo paginate_links( array(
	´base´ => $paginate_base,
	´format´ => $paginate_format,
	´total´ => $wp_query->max_num_pages,
	´mid_size´ => 5,
	´current´ => ($paged ? $paged : 1),
        ´type´ => ´list´,
        ´prev_text´ => ´ &laquo; السابق´,
        ´next_text´ => ´التالي &raquo;´,
));
echo "n</div>n";

?>

احفظ الملف في مسار القالب الرئيسي باسم navigation.php

ثم افتح صفحة الاندكس index.php بالنوتباد

واكتب الكود التالي بعد انتهاء لوب المقالات :

<?php if (function_exists(´wp_pagenavi´)) { wp_pagenavi(); } else { include(´navigation.php´); } ?>

	<?php endif; ?>

انتهينا تقريباً

بقي علينا الستايل

افتح ملف الستايل :

.pagenavi {
    margin: auto;
    overflow: hidden;
}
.pagenavi ul {
    margin-bottom: 50px;
    padding: 10px;
}
.pagenavi ul li {
    display: block;
    float: right;
    margin: 3px;
}
.pagenavi ul li a:hover, .pagenavi ul li .current {
    background: none repeat scroll 0 0 #FF9C00;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    padding: 10px;
}
.pagenavi ul li a {
    background: none repeat scroll 0 0 #2D2C2C;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    padding: 10px;
}

احفظ ملف الاستايل وافتح موقعك

ستظهر بهذا الشكل :

تحديث

لتطبيق هذا الشرح على قالب twenty ten
طبق الخطوة الاولى
ثم افتح ملف الindex.php
بعد div الاغلاق الخاص بالمحتويات

			</div><!-- #content -->

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

		<?php include(´navigation.php´);  ?>

ثم افتح ملف loop.php

وامسح الكود التالي :

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link( __( ´<span class="

meta-nav">&larr;</span> Older posts´, ´twentyten´ ) ); ?></div>
					<div class="nav-next"><?php previous_posts_link( __( ´Newer posts

 <span class="meta-nav">&rarr;</span>´, ´twentyten´ ) ); ?></div>
				</div><!-- #nav-below -->
<?php endif; ?>

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

كيفية اضافة صندوق أعجبني للووردبريس – Yourcolor

الووردبريس wp

عليك امتلاك صفحة خاصة لموقعك على الفيسبوك

اذهب الى صفحتك على الفيسبوك،
من اقصى اليمين، اضغط على edit page

تحرير الصفحة

ستظهر لك قائمة بالخيارات
اختار تسويق marketing
ومن ثم اختار add like box to your website

 

اعدادات صندوق أعجبني

سيظهر لك الصندوق الظاهر امامك

1.ضع رابط الصفحة

2.عرض الصندوق (يجب ان يتوافق مع القائمة الجانبية لمدونتك)
3.لون الصندوق
4.اظهار/اخفاء صور المعجبين
5.لون الاطار مثلاً red
6.اخفاء/اظهار المقتطفات
7.اخفاء/اظهار الترويسة

ثم اضغط get code

انسخ الكود iframe

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

المربعات الجانبية

واضف المربع نص HTML
والصق الكود بداخله

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

كيفية اضافة زر تويتر اتبعني follow في الووردبريس – YourColor

الووردبريس wp

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

لاضافتها في موقعك..

من لوحة التحكم –> المظهر –> المربعات الجانبية –> مربع نص

والصق هذا الكود :

<a href=”http://twitter.com/twitter&#8221; class=”twitter-follow-button” data-show-count=”false”>Follow @twitter</a>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

مع مراعاة تغيير فtwitter الى اسمك على التويتر

أو تستطيع توليد كود جديد من هنا :

توليد كود زر توتير للووردبريس

أو انسخ الكود، والصقه في single.php أو في أي مكان تريده

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

كيفية اضافة زر جوجل +1 – YourColor

الووردبريس wp

نظرة عامة :

في الآونة الأخيرة، وبعد طول انتظار تتقدم جوجل بخطوة كبيرة في عالم البحث، فقد أطلقت شركة جوجل زر +1 (plus 1) وهو زر تستطيع مقارنته بزر “أعجبني” الخاص بالفيسبوك.

باستثناء أن زر 1+ يستخدم في مجال البحث، ليسهل على أصدقائك أو جهات الاتصال المضافة لديك أو الآخرين على الانترنت الحصول على أفضل نتيجة.

مثال، في هذا الموضوع سنشرح طريقة اضافة زر 1+ ، عندما يأتي الزائر ويعجبه الموضوع، سيضغط على زر جوجل 1+، وبذلك عند البحث في جوجل عن موضوع “كيفية اضافة زر جوجل الى الووردبريس” سيظهر هذا الموضوع للشخص الذي قام بالضغط على ذلك الزر (1+)

أولاً:كيفية اضافة زر جوجل 1+ للووردبريس

أنشأت جوجل صفحة خاصة لأصحاب المواقع لتوليد شفرة (كود) خاص لهذا الزر بالخيارات التي تريدها

افتح ملف footer.php الكائن في ملف القالب الخاص بمدونتك،

الصق هذا الكود :

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

ومن ثم افتح ملف single.php والصق هذا الكود بعد انتهاء/بدء لوب المقالات the_content

	<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

حفظ التغييرات :

في حال أردت متابعة احصائيات الزر في حساب احصائيات جوجل (google analytics)

افتح ملف single.php
وغير الى الكود الى التالي

<g:plusone callback="plusone_vote"></g:plusone>

وافتح ملف الفوتر footer.php

وغير الكود المضاف من قبل الى التالي :

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
			function plusone_vote( obj ) {
				_gaq.push([´_trackEvent´,´plusone´,obj.state]);
			}
</script>

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

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

الووردبريس wp

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

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