اضافه کردن آخرین پست ها از دسته بندی ها

[!Mojtaba 980]

برای استایل دادن پیشنهاد می کنم :

یک لایه برای کل مجموعه بسازید و با یک کلاس خاص نام گذاری کنید و برای هر دسته هم یک لایه دیگه یعنی

<div class="myCatBox">
			 <div class=myCat1">
کدهای یکی از دسته بندی
....
			 </div>
			 <div class="myCat2">
کدهای دسته بندی بعدی
....
				 </div>
....
</div>

حالا می تونید با استفاده از کلاس ها هر استایلی خواستید بدید

الان این کد رو میتونم تو استایل قرار بدم ؟

من سوالم اینه

الان اگه مثلا به کد های استایل مطالب مشابه که خودتون دادید نگاه میندازی کد هاش اینطوریه :

#my-related-post {
display:block;
direction:rtl;;
text-align:right
}
.mymaxhul {
list-style-image: url('images/llibg.png');
margin:0px auto;
background:#EFEFEF;
}
.maxhul li {
line-height:26px;
font-family:Tahoma;
height:26px;
font-size:17px;
font-weight:100;
list-style-position:inside;
}
.mymaxh2 {
margin:0 auto;
background: #2ea1ff;
color:#336699;
}
.mymaxhul li a {
color:#000;
}

دیدید کد ها چطوریه ؟ مثلا با تغیر این background:#EFEFEF بک گراند عوض میشه یا مثلا اچیزای دیگه !!

مثلا فک کنم این اسم همین استایل هست #my-related-post

من اسم استاسل رو باید چی بزارم ؟!

من دقیقا سوالم همینه !! الان شما مثلا یه نمونه دیگه نگاه کنید : استایل منو دسته بندی هام هست :

#menu {border-top: 0px solid #072681;height:40px;margin-top:-43px;}
#menu li {border-right: 1px solid #e9e9e9;display: block;float: right;height: 20px;padding: 3px 0;position: relative;}
#menu li a {color: 072681;display: block;float: right;font-family: ST,times New Roman;font-size: 14px;font-weight: bold;height: 24px;line-height: 24px;margin-top: -4px;padding: 3px 10px 4px;position: relative;}.arrow {background: url("images/arrow.png") no-repeat scroll 0 0 transparent;display: block;height: 5px;left: 42%;position: absolute;top: -1px;width: 10px;}#menu li a:hover, #menu li a.selected, #menu li a.selected:hover

مثلا من با تغیر متغیر های این تونستم یه منو جدید بسازم !! متوجه شدید !

من سوالم همینه ! مثلا الان کدید که شما دادری رو باید بزارم تو استایل ؟ بعد چطوری مثلا استایل بدم ؟ کد هاش رو از کجا میتون گیر بیارم !

[!Mojtaba 980]

برای استایل دادن پیشنهاد می کنم :

یک لایه برای کل مجموعه بسازید و با یک کلاس خاص نام گذاری کنید و برای هر دسته هم یک لایه دیگه یعنی

<div class="myCatBox">
			 <div class=myCat1">
کدهای یکی از دسته بندی
....
			 </div>
			 <div class="myCat2">
کدهای دسته بندی بعدی
....
				 </div>
....
</div>

حالا می تونید با استفاده از کلاس ها هر استایلی خواستید بدید

چرا نمیتونم پست قبلیم رو ویرایش کنم !؟؟؟!!!؟!!!؟!؟!؟!

خب من متوجه شدم برای هر دسته یه گروه مانند درست کردم ببینید درسته ؟ ::::

<div class="myCatzendegi">
						 <div class=myCat1">

<h3 class="front">زندگی</h3>
<?php
query_posts('cat=9&showposts=1');
if(have_posts()): while(have_posts()): the_post();
?>
<?php the_post_thumbnail(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php
endwhile; endif;
wp_reset_query();
?>
						 </div>

						 <div class="myCat2">

<?php
query_posts('cat=9&showposts=3&offset=1');
if(have_posts()): while(have_posts()): the_post();
?>
<?php the_post_thumbnail(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php
endwhile; endif;
wp_reset_query();
?>
						 </div>
						 <div class="myCat3">
<?php
query_posts('cat=9&showposts=1&offset=4');
if(have_posts()): while(have_posts()): the_post();
?>
<?php the_post_thumbnail(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php
endwhile; endif;
wp_reset_query();
?>
						 </div>
</div>

تو استایل هم اینارو قرار دادم :

#myCatzendegi {   }

#myCat1 {   }
#myCat2 {   }
#myCat3 {   }

ویرایش شده بهمن 91 توسط honda.moji

[Morteza 34190]

تا اینجا درست هست.

حالا باید به باکسهای اصلی استایل بدید.

برای شروع با خواص float آشنایی دارید؟ که بتونیم توصیح بدیم؟

[!Mojtaba 980]

تا اینجا درست هست.

حالا باید به باکسهای اصلی استایل بدید.

برای شروع با خواص float آشنایی دارید؟ که بتونیم توصیح بدیم؟

نه آشنایی ندارم ! اصلا صفر !

[Morteza 34190]

فقط برای نمونه براتون استایل زدم تا کمی مسئله براتون باز بشه:

http://jsfiddle.net/uw3ry/

[!Mojtaba 980]

فقط برای نمونه براتون استایل زدم تا کمی مسئله براتون باز بشه:

http://jsfiddle.net/uw3ry/

اقا مرتضی کل منو ها سایز به غیر از همین منو که با کمک هم ساختیم سایزشون عوض ضد و قالب یکم ناجور شده !

[imanfakhar 26231]

#myCatzendegi { }

#myCat1 { }
#myCat2 { }
#myCat3 { }

.myCatzendegi { }
.myCat1 { }
.myCat2 { }
.myCat3 { }

[!Mojtaba 980]

.myCatzendegi { }
.myCat1 { }
.myCat2 { }
.myCat3 { }

برا اینکه اسپم نشه دوتا سوال ...

با این کد همه مو هام عرضش زیاد شده :

.myCatzendegi {
    font-family: tahoma;
    direction: rtl;
    width: 985px;
    background: #bbb;
    height:280px;
}
.front {
    background: #000;
    color: #fff;
    width: 985px;
}
.myCat1 {
    background: #ccc;
    width: 250px;
    border-left: 1px solid red;
    float: right;
    height: 280px;
    padding: 5px;
}
.myCat2 {
    background: #ddd;
    width: 250px;
    border-left: 1px solid red;
    float: right;
    height: 250px;
    padding: 5px;
}
.myCat3 {
    background: #bbb;
    width: 250px;
    border-left: 1px solid red;
    float: right;
    height: 250px;
    padding: 5px;
}

این از این !! خوب اگه میشه یه توضیح کوچیک بدید که کا اینا چیه : float: right; /// padding: 5px; border-left: 1px solid red;

[imanfakhar 26231]

ببینید تمام عرض ها مربوط می شند به

width

که در هر مورد دارید اینکه عرضش زیاد شده را یا باید با مقدار بفرمایید یا خودتان از مقدارهای

width کم یا زیاد کنید تا به مقدار مطلوب برسید اما نسبت به اندازه ای که قبلا داشته اید فکر کنم 11px باید از هرکدام کم نید

float:right برای این است که کادر را جمع کند به سمت راست نوشته

padding:5px مقدار فاصله کلمات تا حاشیه لایه مربوطه آنهاست (داخل لایه)

border-left: 1px solid red یعنی در سمت چپ لایه یک خط با ضخامت یک پیکسل و به صورت خط صاف معمولی کشیده شود

البته به اینصورت که شما نوشتید و با وجود (///) دو کد آخر غیر فعال هستند و در صورت برداشتن اسلش ها خوانده می شوند

[!Mojtaba 980]

خوب من هر کاری کردم نتونستم درستش کنم ! یعنی اینکه این کدی که اقا مرتضی بهم داد رو وقتی تو استایل قرار میدم عرض همه منو هام تو صفحه اول بزرگ میشه و به طوری قالب رو بهم میریزه ! مشکل از کجاست !؟

[!Mojtaba 980]

من نتوستنم پست بالای رو ویرایش کنم !

خب من یکم کد هارو مرتب کردم و دلیل اون که با قرار دادن استایل شما بقیه منو هارو به هم میریخت این بود که باید عرض رو از flot حدف میکردید ( تجربه شد )

خب من بقیه منو هاروم ساختم و به این شکل در اومد :

http://up.vbiran.ir/images/zk9fgraqmbq71icgktyc.png
http://up.vbiran.ir/images/5dvhx3b5vhhpocby0fzd.png

و چیزی که من میخاستم :

http://up.vbiran.ir/images/reljapdg1zjz2fgs2q7i.jpg

خب اولین سوال من اینه که اون 3 تا قسمت میخام کنار هم باشن ( الان یکی بالا هست و دوتا دیگه پاینن هستن )

تغیر رنگ منو هر 4 بخش ( الان سیاه هست ( اون نوار مشکی منظورم هست) )

راست چین کردن منو هر پست ( الان چپ چینه )

خب اگه دقت کرده باشید اون قسمت سوم توش 3 تا مطلب هست که میشه با اون 3 تا مربع که زیره منو هست نوشته هارو جابجا کرد ( الان برا من نداره ( تصویر اصلی) )

خب اینا رو من میخام ... مرسی فک نکنم چیزه سختی باشه !! ( مرسی که به خودمم یاد دادید

ویرایش شده بهمن 91 توسط Morteza
حجم عکس زیاد بود،آدرس جایگزین شد.

[Morteza 34190]

خوب تا اینجای کار خوب جلو رفتین. بهرحال اولین کار هست و تا نهایی بشه خیلی چیزهای یبشتری هم یاد میگیرید.

شما کد کاری که انجام دادید رو بزارید اینجا تا یکسری تغییرات بدیم و بعد طبق اون توضیح بدیم.

[!Mojtaba 980]

کد استایل ها :

*myCatzendegi {

font-family: tahoma;

direction: rtl;

}

.myCatzendegi {

font-family: tahoma;

direction: rtl;

width: 980px;

background: #dfdfdf;

height:200px;

}

.front {

background: #000;

color: #fff;

}

.myCat1 {

background: #2c99e5;

width: 300px;

border-left: 10px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat2 {

background: #7ae52c;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat3 {

background: #e52c4a;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

// &&& //

*{

font-family: tahoma;

direction: rtl;

}

.myCatjamee {

font-family: tahoma;

direction: rtl;

width: 980px;

background: #1cd25c;

height:200px;

}

.front {

background: #000;

color: #fff;

}

.myCat4 {

background: #2c99e5;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat5 {

background: #7ae52c;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat6 {

background: #e52c4a;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

/// ### ////

*{

font-family: tahoma;

direction: rtl;

}

.myCatfarhang {

font-family: tahoma;

direction: rtl;

width: 980px;

background: #1cd25c;

height:200px;

}

.front {

background: #000;

color: #fff;

}

.myCat7 {

background: #2c99e5;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat8 {

background: #7ae52c;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat9 {

background: #e52c4a;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

/// &&&& ////

*{

font-family: tahoma;

direction: rtl;

}

.myCatdin {

font-family: tahoma;

direction: rtl;

width: 980px;

background: #1cd25c;

height:200px;

}

.front {

background: #000;

color: #fff;

}

.myCat10 {

background: #2c99e5;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat11 {

background: #7ae52c;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

.myCat12 {

background: #e52c4a;

width: 300px;

border-left: 1px solid red;

float: right;

height: 129px;

padding: 5px;

}

[Morteza 34190]

کدهای html-css رو توی سایت jsfiddle.net بزارید تا اونجا ما هم بتونیم ویرایش کنیم و کار برای هر دو طرف راحتتر میشه و هم اینکه پیش نمایش داره.

[!Mojtaba 980]

بفرمایدد !

فقط یه سوال که فک کنم باید اخر بپرسمش ! گفتم اون متن هارو اگه بخایم فاصلشون رو از هم زیاد تر کنیم و فونت و رنگشون رو هم عوض کنیم باس چیکار کنیم ؟!

زندگی :http://jsfiddle.net/9eJFg/2/

جامعه : http://jsfiddle.net/8sgdW/

فرهنگ http://jsfiddle.net/wzLrJ/

دین :http://jsfiddle.net/9vpVQ/

ویرایش شده بهمن 91 توسط honda.moji

[Morteza 34190]

برای اینکه بهتر متوجه تغییرات بشید من کدهای وردپرس رو موقت حذف کردم و بجاش کدهای معمولی و عکس رو اضافه کردم:

http://jsfiddle.net/8sgdW/1/

[!Mojtaba 980]

برای اینکه بهتر متوجه تغییرات بشید من کدهای وردپرس رو موقت حذف کردم و بجاش کدهای معمولی و عکس رو اضافه کردم:

http://jsfiddle.net/8sgdW/1/

گرفتم چیشد !

الان شما اومدی تصویر ها و توضح هارو بهم فهموندید اوی اوکی دقیقا فهمیدم !!

خب الان بجای اون تصاویر تصویر شاخص بخام قرار بدم خوب ؟ باید یه کدی رو اضافه کنم ؟ به اون کد اولی ها ها !! باید چه کدیر

[!Mojtaba 980]

خب اقا مرتض اون کدی که داده بدید یه مشکل داشت که اون سه قسمت رو کنار هم نمیورد !!

یه دونه " کم گذاشته بودیم !!

						 <div class=myCat4">

						 <div class="myCat4">

[Morteza 34190]

کد رو براساس کد شما زدم حالا اگر مشکلی هم هست خودتون میتونید فیکس کنید

در مورد عکس، شما تگ img ر وحذف کنید(کلا) و بجاش در هر بخش تابع تصویر شاخص رو قرار بدید:

<?php the_post_thumbnail(); ?>

[!Mojtaba 980]

اگه بخایم فاصله دو تا تیتر رو تو منو وسط بیشتر کنم چه کدی رو باید اضافه کنم به استایل ؟

[Morteza 34190]

دقیقا کجا با کجا؟ توی سایت هست؟

کلا برای فاصله دادن از خاصیت margin استفاده میشه.

[!Mojtaba 980]

مثلا الان تو سایت اینطوری شده :

همه چیز درباره Wi-Fi در تلفن‌های همراه

ویژگی فضانورد ایرانی چه باید باشد؟

کلید درمان درد های مزمن در زشت ترین موجود جهان

ناسا از همه اشتباهات بزرگ خود درس گرفت

طرز تهیه و پخت ماکارونی

پرتاب کاوشگر حامل موجود زنده پیشگام به فضا

وعده غذایی سالم مخصوص کارمندان

چگونه بهترین چای را دم کنیم ؟

آموزش تهیه رولت کوکوسبزی

برای سالم ماندن ماهی آزاد بخورید

الان من این هارو گذاشتم الان فاصلشون تو سایت خیلی به هم چسبیده و بلد ( هم هست الان بخام فاصلشون رو درست کنم چه کنم ؟

راستی یه سوال دیگه تو ستون سمت راست الگه بری نگا کنی ستون اولی ( سمت راست که همراه با عکسه ) اون جا هم تیتر و هم توضیحاتش سمت راسته عکس هستن .... من میخام توضیحاتش بیاد زیره عکس و در ضمن به یه کاراکتر خاص مثلا 30 تا کاراکتر ختم شه ...

[Parsa 23463]

این کلاس را چایگزین کنید:

.myCat2 h2 {
    display: inline-block;
    margin: 0 5px 10px 0;
}
.myCat2 img {
    display: inline-block;
    margin: 0 5px;
}

برای تصویر هم float را از استایل تصویر حذف کنید:

.myCat7 img {
    float: right;
}

محدود کردن هم با تابع mb_substr ممکن هست (جستجو)

[!Mojtaba 980]

یه چیزه دیگه ... فک کنم برای بک گراند سر تیر ها اشتباه استایل بندی کردم ! یعنی الان رنگ منو ها سیاهه ( زندگی ، فرهنگ ، جامعه ، دین ) و بکگراندشون هم فیروزه ای هست که نمیشه برای هر دسته یه رنگ جدا انتخاب کرد . یعنی همشون باید یه رنگ سن . این مشکل چیه ؟

[Morteza 34190]

چرا میشه.

میتونید برای هر div یک کلاس اضافه هم تعریف و بهش رنگ بدید.

مثلا اینجوری میشه:

class="first second"