• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
الدرس الثاني: طريقة أو كيفية تصميم قالب ووردبريس

الدرس الثاني: طريقة أو كيفية تصميم قالب ووردبريس

السلام عليكم

اهلا وسهلا بكم في الدرس الثاني من “كيفية تصميم قالب ووردبريس


اليوم راح نتعلم كيفية تحويل تصميم الفوتوشوب الى CSS  😀

لمشاهدة الدرس الاول

اضغط هنا

شاهد المثال

اضغط هنا
لتنزيل الملف كامل(الاكواد+الصور)
اضغط هنا

اعمل ملف جديد على سطح المكتب وسميه “قالب وورد بريس”

في داخل الملف..اعمل ملف جديد وسميه “images”

وافتح الnotepad او اي محرر نصوص واحفظ الملف باسم  save as “style.css”

افتح الnotepad واحفظها باسم index.html

افتح الindex بمحرر النصوص


واكتب الكود التالي

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
كيفية عمل قالب ووردبريس
 
<div id="container">
<!--container starts-->
 
<div id="top-bar"><!--top bar starts--></div>
 
 
<!--top bar ends-->
 
<div id="header"><!--header starts--></div>
 
 
<!--header ends-->
 
<div id="navigation"><!--navigation starts--></div>
 
 
<!--navigation ends--></div>
 
 
<!--container ends-->


ربطنا ملف الستايل

وقسمنا الdivs

لاحظ بعد اغلاق الdivs هنالك تعليق <!–end–>

هذه من اهم الاشياء لترتيب الكود..ستوفر علينا الكثير من الوقت اذا اردنا التعديل على الكود مستقبلاً


الآن افتح ملف الستايل..

اول شيء سنحتاجه .. هو كتابة كود الbody

/* MAIN BODY STYLES */
*{
padding:0;
margin:0;
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #f6f7f1;
font-family: tahoma, Arial, "Century Gothic";
font-size: 12px;
color: #878787;
direction:rtl;
}

خلينا نشرح شوية عن الكود ..

اول شيء..نحن لانريد موقعنا ان يكود له padding  او margin  لذلك سوف نعطيهم القيمة  0

في كود الbody راح يكون في صورة للخلفية..راح نقص الصورة في الخطوة القادمة انشاءالله


نفتح ملف الفوتوشوب

باستخدام اداة الrectangle

حدد 2 بيكسل من اعلى الصفحة..الى آخرها..

ووردبريس

*

اذهب الى image>crop

حفظ الصورة باسم bg.png

احفظها في ملف الimages

خليك في الفوتوشوب

بالضغط على CTRL+Z

سترجع الامور كما كانت

نرجع لملف الستايل.

نكتب الكود التالي

#container {
margin: auto;
width: 900px;
}
#top-bar {
float: left;
height: 28px;
width: 900px;
padding-top: 8px;
}
#header {
float: left;
height: 203px;
width: 900px;
}

عرض الكونتينر 900 بيكسل يتوسط الصفحة..لانحتاج لان نعطي الكونتينر ارتفاع..لانه سيزداد كلما ازداد المحتوى

بالنسبة للtopbar عرضه 900 بيكسل وارتفاعه 28 بيكسل..تم قياس الارتفاع في الفوتوشوب

ونفس الشيء بالنسبة للهيدر..تم قياس الارتفاع في الفوتوشوب..

الان نريد ان نعرف كيف سيتم عرض العناصر في الموقع..

*

ووردبريس

*

كما نرى في الصورة الظاهرة امامنا..في الtopbar يوجد عنصر وهو “الدخول|الاتصال بنا” راح نسميه topbar list

وكذلك الهيدر راح يكون فيه عنصرين..وهو فورم البحث والشعار ..وسنسميهم search و site title

نفتح ملف الhtml

ونكتب الكود التالي

<div id="top-bar">
<!--top bar starts-->
 
<ul class="nav">
 
<li><a href="#">الاتصال بنا</a></li>
 
 
<li><a href="#">الدخول</a></li>
 
</ul>
</div>
 
 
<!--top bar ends-->
 
<div id="header">
<!--header starts-->
 
<div id="site-title"><!--site title starts--></div>
 
 
<!--site title ends-->
 
<div id="search"><!--search starts--></div>
 
 
<!--search ends--></div>
 
 
<!--header ends-->

نرجع لملف الستايل

في الtopbar نريد الكتابة ان تظهر باللون الابيض..وان نزيل التخطيط الذي يضهر اسفل الروابط

لذا..نكتب الكود التالي

#top-bar a{
color: #FFFFFF;
text-decoration: none;
}

في حالة تمرير الماوس على الروابط (الهوفر)

نريد اللون ان يتغير..نكتب الكود التالي

#top-bar a:hover{
color: #323232;
text-decoration: none;
}

نريد الروابط ان تُعرض بصورة افقية..وان نزيل النقط (bullets)

نكتب الكود التالي

.nav li {
display: inline;
list-style-type: none;
margin-right: 20px;
color: #FFFFFF;
float: left;
}

نقص الشعار..

*
*ووردبريس

*
ونكتب الكود التالي في ملف الستايل

#site-title	{
background:url(images/sitetitle.png) no-repeat;
width:450px;
height:120px;
float:right;
position:relative;
top:25px;
}

يتوجب عليك كتابة العرض والارتفاع..طبعا حسب الحجم الحقيقي للصورة..
بالنسبة لي..عرض الشعار 450 بيكسل..وارتفاعه 120 بيكسل
عائم لليمين
نأتي لفورم البحث..
نذهب للفوتوشوب .. ونقص زر فورم البحث
نظلله..image>>crop
ووردبريس
..ونحفظة باسم search.png

نعمل فورم بسيط في صفحة الhtml

<!--site title ends-->
 
<div id="search">
<!--search starts-->
<form method="get">
<input class="search-field" size="30" type="text" value="البحث.." />
<input class="search-button" name="Submit" type="submit" />
</form></div>
 
 
<!--search ends-->
 
<!--header ends-->

نرتب الفورم وننسقه في ملف الستايل

#search {
float: left;
padding-top: 75px;
}
.search-field {
margin-right: 4px;
padding: 7px;
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
}
.search-button {
background:url(images/search.png) no-repeat;
width:50px;
height:33px;
padding:2px;
border: 1px solid #666666;
position:relative;
top:1px;
}
.search-button:hover {
cursor:pointer;
}

ننتقل الى شريط القائمة..
نكتب الكود التالي

#navigation {
height: 50px;
float: right;
width: 900px;
}
.nav_links ul {
margin: 0px;
padding: 0px;
}
.nav_links li {
list-style:none;
display:block;
float: right;
}
.nav_links a {
text-decoration: none;
color: #5f5f5f;
font-size:20px;
display: block;
height: 47px;
padding-right: 17px;
padding-left: 17px;
padding-top:7px;
}
.withdiv {
background-image: url(images/nav_divider.png);
background-repeat: no-repeat;
position:relative;
bottom:3px;
}
.nav_links a:hover {
color: #43a8fe;
}

نقص الفاصل في القائمة
نظلله..ثم..image>>crop
واحفظه باسم nav_divider.png
*
*
ووردبريس

*
*
تكون عندنا الشكل التالي
*
*
ووردبريس

نرجع لملف الفوتوشوب..
ونحدد لير محتوى المقالات..ثم نعدل الخيار التالي
Blending options>>inner shadow
Size=2 pixel
حتى يظهر التأثير بشكل اوضح
ووردبريس
بالضغط على CTRL واللير نفسه سيتحدد كما في الشكل (اذا لم تعرف كيف يتم التحديد..الرجاء مراسلتي)
*
ووردبريس
ثم image>>crop
احفظها باسم post_bg.png
لاتنسى عمل undo بالضغط على ctrl+z او ctrl+shift+z
وكرر نفس العملية للside bar (الشريط الجانبي)
لكن نقصه بحيث يتساوى ارتفاعه مع محتوى المقالات..
*
*
ووردبريس

*
*خلينا نقسم موقعنا..حتى نعرف المصطلحات..

*
*ووردبريس
*
*

نروح لملف الhtml
راح يكون الكود كالتالي

<!--navigation ends-->
 
<div id="content">
<!--content starts-->
 
<div id="content-right"><!--content right starts--></div>
 
 
<!--content right ends--></div>
 
 
<!--content ends-->
 
<!--container ends-->

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

#content {
float: right;
width: 900px;
margin-top: 20px;
padding-bottom: 40px;
}
#content-right {
float: right;
width: 602px;
}

الdiv content راح يحتوي المحتويات .. خلينا عائم لليمين..واعطينا العرض 900..
طيب خلينا نرجع لملف الhtml ونكتب الكود التالي

<div id="content">
<!--content starts-->
 
<div id="content-right">
<!--content right starts-->
 
<div class="a-post">
<!--wordpress post starts-->
 
<div class="post-img">
<img src="images/post_thumbnail.png" alt="Test Image" /></div>
 
 
<div class="post-title">
 
<h1>عنوان تجريبي..</h1>
 
 
نشرت في 21-1-2011 من محمد</div>
 
 
<div class="post-desc">
 
نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي نص تجريبي</div>
</div>
 
 
<!--wordpress post ends--></div>
 
 
<!--content right ends--></div>

نروح لملف الفوتوشوب..نقص صورة المقالة 😉
*
*
ووردبريس
*
*
حفظ باسم post_thumbnail.png
في الكود اللي كتبنا..يوجد هناك كلاسات متعدده (class)
(تذكر..الID لاتستطيع تكرار استخدامه..عكس الclass)
يعني كل ماتكتب مقالة..راح يتكرر هذا الكود.بدايةً من “a-post”
نرجع لملف الستايل ونكمل الكود

.a-post {
background-color: #FFFFFF;
background-image: url(images/post_bg.png);
background-repeat: no-repeat;
border: 1px solid #bababa;
width: 580px;
padding: 10px;
float: right;
margin-bottom: 20px;
}
.a-post h1{
color: #309DCF;
font-size: 24px;
font-weight: bold;
line-height: 34px;
}
.a-post img{
border: 1px solid #d4d4d4;
padding: 5px;
float: right;
}
.post-img {
float: right;
height: 198px;
width: 234px;
margin-right: 10px;
}
.post-title {
float: right;
width: 336px;
margin-bottom: 10px;
}
.post-title p {
color: #FFFFFF;
background-color: #90c6df;
float: right;
}
.post-desc {
float: right;
width: 336px;
text-align: justify;
font-style: italic;
line-height: 16px;
}

الكلاس a-post اعطينا خلفية باللون الابيض+صورة post_bg اللي قصيناها في الفوتوشوب..بعدين اضفنا حدود بعرض 1 بيكسل من جميع الجهات..واعطينا padding 10 من جميع الجهات يعني العرض راح يكون 580 بيكسل..ليش؟ لان 10 من اليمين..و10 من اليسار..=20 وحد 1 بيكسل من اليمين..وحد (border) 1 بيكسل من اليسار..=2
وباقي الكود مفهوم..ماعليك الا النظر بتمعن واذا صعب عليك اي نقطة..ماعليك الا السؤال
نيجي للsidebar
في ملف الhtml  نكتب الكود التالي

<!--content right ends-->
 
<div class="side-bar">
<!--sidebar starts-->
 
<div class="side-bar-content">
<img class="side-bar-ads" src="images/ad.png" alt="Your AD Here" /><img class="side-bar-ads" src="images/ad.png" alt="Your AD Here" /><img class="side-bar-ads" src="images/ad.png" alt="Your AD Here" /><img class="side-bar-ads" src="images/ad.png" alt="Your AD Here" /></div>
 
 
<div class="side-bar-content">
 
<h1>نص عشوائي</h1>
 
 
محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد محمد</div>
 
 
<div class="side-bar-content">
 
<h1>التصنيفات</h1>
 
 
<ul>
 
<li><a href="#">صنف 1</a></li>
 
 
<li><a href="#">صنف 2</a></li>
 
 
<li><a href="#">صنف 3</a></li>
 
 
<li><a href="#">صنف 4</a></li>
 
 
<li><a href="#">صنف 5</a></li>
 
</ul>
</div>
</div>
 
 
<!--sidebar ends-->

وفي ملف الستايل
نكتب الكود التالي

/*side bar*/
.side-bar {
background-color: #FFFFFF;
border: 1px solid #bababa;
float: left;
width: 260px;
background-image: url(images/sidebar_bg.png);
background-repeat: no-repeat;
padding: 10px;
}
.side-bar-content {
width: 260px;
float: right;
margin-bottom: 20px;
}
.side-bar-ads {
margin-left: 3px;
margin-bottom: 3px;
}
.side-bar h1{
color: #309DCF;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
.side-bar p {
text-align: justify;
line-height: 16px;
}
.side-bar li {
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e1e1e1;
margin-left: 15px;
margin-top: 10px;
display: block;
}

اخيراً
الفوتر..
نروح لملف الفوتوشوب..ونقص الفوتر بعرض 2 بيكسل
*
*
ووردبريس
*
*
Image>>crop
نحفظها باسم footer_bg.png
نذهب لملف الhtml ونكنب الكود التالي

<!--container ends-->
 
<div id="footer">
<!--footer starts-->
 
<h2>معهد الويب</h2>
 
 
Copyright © www.m3had.net | All Rights Reserved</div>
 
 
<!--footer ends-->

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

/*footer*/
#footer {
background-image: url(images/footer_bg.png);
background-repeat: repeat-x;
clear: both;
height: 50px;
}
 
#footer h2 {
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
padding-top:15px;
}

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

h1,h2 {
color: #309DCF;
font-weight: bold;
}
h1 {
font-size: 24px;
line-height: 34px;
}
h2 {
font-size: 18px;
line-height: 34px;
}
h3 {
color: #333333;
font-size: 18px;
line-height: 34px;
}
a:link {
color: #309DCF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #309DCF;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #309DCF;
}


Save
لما تيجي تعرض الموقع بالفايرفوكس..
تلاقي شغال 100%
لكن لما تعرضه بالانترنت اكسبلورر..في عنا مشكلة في زر البحث..
نرجع لملف الستايل
ونعدل كود زر البحث
ليصبح كالتالي

.search-button {
background:url(images/search.png) no-repeat;
width:50px;
height:33px;
border: 1px solid #666666;
position:relative\9;
top:11px\9;
padding-bottom:2px;
}

الانترنت اكسبلورر راح يقرا لكن الفايرفوكس لن يقرءها
position:relative\9;
top:11px\9;
اما هذا الكود padding-bottom:2px;
بالعكس..
الانترنت اكسبلورر راح يتجاهله..اما الفايرفوكس راح يقرا

الحمدلله انتهينا من هذا الدرس
اللي يواجه اي مشكلة..كما ذكرت سابقاً..لايتردد بالسؤال

الجزء الثالث كيفية تركيب هذا الستايل على الووردبريس
اضغط هنا
تحياتي

13 رأي على “الدرس الثاني: طريقة أو كيفية تصميم قالب ووردبريس”

  1. HASSAN قال:

    لا يظهر شريط الصفحات

    http://www.gulfup.com/?r8dZrN

  2. محمد قال:

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

    وفقكم الله وشكرا لكم
    محمد – العراق

  3. فهد الكعبي قال:

    شكراً اخووي على الدرس ولي عوده للتطبيق

    1. محمد ريان قال:

      العفو 🙂

  4. محمد ريان قال:

    تقص الشعار بأكثر من طريقة
    باستخدام اداة القص
    crop tool

  5. ابراهيم قال:

    نريد الروابط ان تُعرض بصورة افقية..وان نزيل النقط (bullets)
    نكتب الكود التالي ثم نقص الشعار..

    كيف اقص الشعار واين اضعه

  6. ابراهيم قال:

    نريد الروابط ان تُعرض بصورة افقية..وان نزيل النقط (bullets)
    نكتب الكود التالي

    1. محمد ريان قال:

      لازالة النقط
      .nav li {
      display: inline;
      list-style-type: none;
      margin-right: 20px;
      color: #FFFFFF;
      float: left;
      }

  7. تنبيه: غير معروف
  8. samir قال:

    موضوع رائع وشرح مفصل..بإنتظار الجزء الثالث على أحر من الجمر

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *