رفتن به مطلب

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


پست های پیشنهاد شده

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

در تصویر توضیحات رو دادم، اما جدای از اون دو تا مشکل دارم:

اول اینکه چطور در سمت راست تصویر همونطور که می بینید، یک تصویر ثابت برای تمامی پستها بزارم که با کلیک بر روی اون به ادامه ی مطلب همون پست بره

دوم اینکه چطور یک تصویر غیر ثابت بزارم که بازم به ادامه ی همون مطلب بره.

البته اینم بگم که با قرار دادن تصویر در پستها هم مشکل دارم چه برسه که بخوام یه همچین چیزی بسازم.

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

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

اگر حداقل بتونید راهنماییم کنید خیلی ممنون می شم، چون توی ویرایشگر ووردپرس که نمی شه این کار رو پیاده کرد.

post-1145-0-57350000-1355614686_thumb.pn

ویرایش شده توسط Abraham
لینک به ارسال

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

نکته : تصویر غیر ثابت همان بند انگشتی است.

جستجو کنید در بخش آموزش انجمن موجود هست.

لینک به ارسال

سلام

به انجمن خوش اومدین دوست عزیز

یک مورد هم اضافه کنم برای بخشهای متغییر(عکس) هم میتونید از زمینه دلخواه استفاده کنید.

لینک به ارسال

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

نکته : تصویر غیر ثابت همان بند انگشتی است.

جستجو کنید در بخش آموزش انجمن موجود هست.

نمی دونم اون تصویر که قراردادم منظورم رو به صورت کامل می رسونه یا نه، اونم اینه که: تصویر غیر ثابتی که اندازه اش با تصویر ثابت طرف مقابلش یکیه، دقیقاً پشت بدنه ی محتوای پست قرار می گیره، هر چند خودش داخل بلاک اصلی پست هست، ولی از پشت عنوان پست شروع می شه، و عنوان پست بعد از اون قرار میگیره.

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

به عکس سمت راست پست و همچنین عنوان و محتوای پست بعد از اون دقت کنید، فکر کنم منظور رو رسونده باشم.

متشکرم

سلام

به انجمن خوش اومدین دوست عزیز

یک مورد هم اضافه کنم برای بخشهای متغییر(عکس) هم میتونید از زمینه دلخواه استفاده کنید.

متشکرم، کاش این انجمن رو زودتر پیدا می کردم

برای استفاده از تصویر زمینه که متغیر هم هست و قراره برای تمامی پست ها استفاده بشه و از طرفی قراره وقتی روش کلیک می کنی به ادامه ی پست بره، چیکار کنم دقیقاً؟ اونم با این توجه که قبل از عنوان قرار میگیره، و با اینکار عنوان به سمت چپ شیفت پیدا می کنه

لینک به ارسال

ظاهرا منظورتون رو درست متوجه شدم .

شما کدی چیزی از قاب دارید یا نه میخوایید تازه این بخش رو کدنویسی کنید ؟

لینک به ارسال

نه من هیچ چیزی ندارم، جز یک قالب که می خوام تمام پست هاش به همون شکل باشه که توی تصویر مشاهده می کنید، همین، منتهاش واقعاً اصلاً نمی دونم چیکار کنم.

اولین مشکل من اینه که وقتی یه تصویری رو توی ویرایشگر متن برای یک نوشته ی تازه در وردپرس به سمت راست اضافه می کنم می ره زیر عنوان ( که با توجه به تصویری که من ارسال کردم، نمی خوام اینطور بشه، چون عکس ( سمت راست تصویر ( کاملاً توی بدنه ی پست هست اما با عنوان توی یک خط نیست، و وقتی هم یه تصویر به سمت راست اضافه می کنم وقتی اون "عنوان پست" هم که توی تصویر مشاهده می کنید بیشتر از یک خط باشه، اون عکس به زیر اون متن می ره.

امیدوارم منظورم رو درست رسونده باشم.

متشکرم

لینک به ارسال

شما همین بخشی که مدنظرتون هست رو بصورت html طراحی کنید.

بعد اینجا بزارید تا باهم قدم به قدم بریم جلو و شما هم تبدیل رو این بخش و توابع رو یاد بگیرید. برای باقی دوستان هم آموزش خوبی میشه.

لینک به ارسال

بعید می دونم از اساس درست باشه، ولی خب، اینه:

<style type="text/css">
* {
font-family: tahoma;
font-size: 14px;
}
#WholePost {
border: 5px solid #999;
height: 150px;
width: 700px;
}
#LeftPic {
positon: absolute;
border: 1px solid #FC0;
float: Left;
width: 150px;
height: 150px;
background: #FC0;
}
#RightPic {
position: absolute;
float: right;
border: 1px solid #FC0;
width: 150px;
height: 150px;
background: #FC0;
}
#PostTitle {
width: 50%;
height: auto;
float: right;
background: #CC3;
margin-right: 150px;
padding-right: 10px;
}
#PostCategory {
width: 40%;
height: auto;
float: right;
background: #F90;
margin-right: 150px;
margin-top: 5px;
}
#MoreInfo {
position: absolute;
top: 100;
width: 20%;
height: auto;
background: #F90;
right: 50%;
top: 145;
}
</style>
<div id="WholePost" dir="rtl">

<div id="LeftPic">
این تصویر ثابت سمت چپ است که با کلیک بر روی آن به ادامه ی پست می رویم
</div>

<div id="PostTitle">
عنون پست در اینجا قرار می گیرد که ممکن است طولانی تر از این باشد باید به چند خط تبدیل شود
</div>
<div id="PostCategory">
عنوان دسته بندی این پست
</div>

<div id="MoreInfo">
توضیحات بیشتر
</div>
<div id="RightPic">
این تصویر غیر ثابت سمت چپ است که با کلیک بر روی آن به ادامه ی پست می رویم
</div>
</div>

post-1145-0-99933900-1355709806_thumb.pn

ویرایش شده توسط Abraham
لینک به ارسال

کدی که دادید این شده :

http://jsfiddle.net/FhSBx/

فکر کنم با عکس پست اول همخوانی نداره. درسته؟

لینک به ارسال

کدی که دادید این شده :

http://jsfiddle.net/FhSBx/

فکر کنم با عکس پست اول همخوانی نداره. درسته؟

بله، نداره، چون اون div "توضیحات بیشتر" باید طبق چیزی که من توی دریم ویور کار کردم، و عکسش هم توی پست قبلی هست می چسبید به پائین div ی که آی دیش WholePost هست، نمی دونم چرا توی jsfiddle اینجوری نمایش می ده.، هر چند اگر این مشکل هم رفع بشه بازم حق باشماست و مثل عکس اولی نیست، چون همینقدر کفایت می کنه، توی "توضیحات بیشتر" برای هر پست در حدود یک خط می شه که کفایت می کنه و اگر مقایسه کنید در کل فقط یک div کم داره.

برای ادامه ی کار خوب نیست یا اینکه اصطلاحش کنم؟

ویرایش شده توسط Abraham
لینک به ارسال

در ضمن اینم اضافه کنم که: اگر منظورتون اون Padding ها و Rounded Border هائیه که طبق تصویر اول باید اعمال می شد، فقط بخاطر اینکه اهمیت چندانی نداشتن ست نکردم، چون چه اونها تنظیم بشن و چه تنظیم نشن، مشکل رو می شه حل کرد.

لینک به ارسال

http://jsfiddle.net/FhSBx/4/

بررسی کنید همین هست. اگر اوکی هست تبدیل روانجام میدیم.

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

لینک به ارسال

از اینکه ویرایش کردید متشکرم، بخاطر امتحانات میان ترم یه کم درگیرم فعلاً، بنظرم باید از پایه و اساس چکش کنم، بعد از اون می ریم برای تابع نویسیش. البته نمی زارم بیشتر از یه چند روزی طول بکشه.

اگر از دوستان هم کسی تونست CSS مربوطه رو به نحوی بنویسه که شما اشاره می کنی، استقبال می کنیم.

با اینکه تا چند ساعت دیگه، یعنی صبح ساعت 8:30 امتحان میان ترم دارم مثلاً، ولی خوابم نمی بره، مجبورم که روی این کار کنم، یعنی میزان علاقه ی من به این مسأله ( فراگیری وب ) حالا هر چی که بود توی این زمینه خیلی بیشتر از امتحان میان ترم صبحه، در هر صورت بزارین یه سوال بپرسم:

با چه دستوری و چجوری می شه در یک پست "دسته بندی " اون پست رو نشون داد؟ مثلاً با کدهای کوتاه؟ یا هر چیز دیگه ای؟

با اینکه تا چند ساعت دیگه، یعنی صبح ساعت 8:30 امتحان میان ترم دارم مثلاً، ولی خوابم نمی بره، مجبورم که روی این کار کنم، یعنی میزان علاقه ی من به این مسأله ( فراگیری وب ) حالا هر چی که بود توی این زمینه خیلی بیشتر از امتحان میان ترم صبحه، در هر صورت بزارین یه سوال بپرسم:

با چه دستوری و چجوری می شه در یک پست "دسته بندی " اون پست رو نشون داد؟ مثلاً با کدهای کوتاه؟ یا هر چیز دیگه ای؟

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

http://forum.wp-pars...خ-از-بالای-پست/

لینک به ارسال
  • 2 هفته بعد...

http://jsfiddle.net/FhSBx/4/

بررسی کنید همین هست. اگر اوکی هست تبدیل روانجام میدیم.

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

تأخیر بخاطر امتحانات میانترم بیش از حد طولانی شد، پوزش.

این طرح مشکلی نداره تا اینجا بنظرم، هر چند هیچ کی تا حالا نظری نداده، اگر شما صلاح بدونین تابع نویسیش رو شروع کنیم، متشکرم.

لینک به ارسال

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

این کد رو برای هرجایی که نیاز هست تا پستهای تکراری ایجاد بشه باید استفاده کنید.

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_title() ?>
<?php the_content() ?>
<?php endwhile; endif; ?>

لینک به ارسال

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

http://jsfiddle.net/3TaMz/1/

لینک به ارسال

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

http://jsfiddle.net/3TaMz/1/

بله، متوجه شدم، متشکرم. اینجوری بنظر منطقی میاد.

لینک به ارسال

خوب برای پست های کناری هم کافیه شما یک کوئری بزنید و یک پست آخر از اون بخشی که میخواین رو فراخوانی کنید.

query_posts('cat=1&showposts=1');

لینک به ارسال

خوب برای پست های کناری هم کافیه شما یک کوئری بزنید و یک پست آخر از اون بخشی که میخواین رو فراخوانی کنید.

query_posts('cat=1&showposts=1');

امان از دست این امتحانات پایان ترم...

متوجه ی منظورتون از پست های کناری نمی شم، یعنی چی اونوقت؟

لینک به ارسال

شما بجز بخش وسط میخواستین در دوطرف هم یک پست نمایش بدبد درسته؟

اگر همین رو میخواید باید از کوئری استفاده کنید.

لینک به ارسال
ارسال شده در (ویرایش شده)

شما بجز بخش وسط میخواستین در دوطرف هم یک پست نمایش بدبد درسته؟

اگر همین رو میخواید باید از کوئری استفاده کنید.

هر چند بازم متوجه نشدم، اما من فقط می خوام بالا و پائینش پست قبلی و پست بعدی نمایش داده بشه، سمت راست و چپ نیازی به نمایش پست فکر نمی کنم باشه، مثل کاشی اگه منظورتون باشه، نه.

ویرایش شده توسط Abraham
لینک به ارسال

اگر فقط عنوان پست قبلی و بعدی هست یک راهش استفاده از کوئری هست و خاصیت offset که در کوئری استفاده میشه.

لینک به ارسال

اگر فقط عنوان پست قبلی و بعدی هست یک راهش استفاده از کوئری هست و خاصیت offset که در کوئری استفاده میشه.

خب حالا باید چیکار کنیم؟، می خواهید من یه شمای کلی از اونچیزی که توی ذهنمه رو بصورت مصور بزارم؟

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...