رفتن به مطلب

کادربندی پست


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

با سلام

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

کادر بندی پست:

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

من استایل و کد اصلی رو قرار میدهم.

کد صفحه ی اصلی:


<div class="content">
<div class="top-content">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div id="post-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
</a>
</div>
<div class="post-edit-top">
<?php edit_post_link('ويرايش', ''); ?>
</div>
<div id="img-top-post">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?></a>
</div>
<div id="content-text">
<?php the_content_rss('', TRUE, '', 50); ?>
<a href="<?php the_permalink() ?>" class="more-link">ادامه...</a>
</div>
<?php endwhile; ?>
<!-- <div class="navigation">
<?php posts_nav_link(); ?>
</div>-->
<?php else : ?>
<div class="">
<h2><?php ('Not Found'); ?></h2>
</div>
<?php endif; ?>
</div>
</div>

این هم استایل صفحه:


.content{
float: right;
height: auto;
width: 550px;
}
.top-content{
float: right;
background: #ededed;
height: auto;
width: 550px;
border: 1px solid #dbdbdb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#img-top-post img{
margin: 10px 10px 10px 10px;
float: left;
width: 150px;
height: auto;
border: 1px solid #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#post-title{
float: right;
margin: 5px 10px 0 0;
font-family: 'BYekan';
font-size: 18px;
color: #FF0000;
}
#content-text{
margin: 5px 15px 0 0;
float: right;
font-size: 12px;
font-family: tahoma;
text-align: justify;
width: 360px;
}

لینک به ارسال


<div class="content">

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="top-content">
<div id="post-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
</a>
</div>
<div class="post-edit-top">
<?php edit_post_link('ويرايش', ''); ?>
</div>
<div id="img-top-post">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?></a>
</div>
<div id="content-text">
<?php the_content_rss('', TRUE, '', 50); ?>
<a href="<?php the_permalink() ?>" class="more-link">ادامه...</a>
</div>
</div>
<?php endwhile; ?>
<!-- <div class="navigation">
<?php posts_nav_link(); ?>
</div>-->
<?php else : ?>
<div class="">
<h2><?php ('Not Found'); ?></h2>
</div>
<?php endif; ?>

</div>

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

لینک به ارسال

بسیار عالی بود. متشکر

نمیدونم سوال های بعدی هم همینجا بپرسم یا موضوع جدید ایجاد کنم.(اگر مشکلی بود بگید)

برای ایجاد مسیر جاری متاسفانه در جستجو به نتیجه ای نرسیدم. چه کدی باید استفاده کرد.

post-26-0-20246200-1359705207_thumb.png

لینک به ارسال

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

در غیر این صورت تاپیک ایجاد کنید . البته ابتدا جستجو

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

سلام

در تصویر زیر مشخص کردم چگونه ادامه ی نوشته ها به زیر تصویر اضافه شود. یعنی مانند یک بلوک.

post-26-0-78584500-1360716171_thumb.jpg

لینک به ارسال

من متوجه مسیر جاری و ادامه ی نوشته نشدم!

اما به هر حال برای مسیر جاری کد زیر رو به فانکشن اضافه کنید:


function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> | ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " | ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}

و بعد برای نمایش مسیر کد زیر رو به هر جایی که میخواین وارد کنید مثلاً single.php یا page.php یا home.php یا ....


اینجایید: <?php the_breadcrumb(); ?>

لینک به ارسال

isk عزیز اون مشکل در تایپیکی جداگانه به وسیله ی دوستان حل شد!

مشکل بنده در حال حاضر آخرین پرسش است که با تصویر نارنجی قرار دادم.

لطفا در این زمینه راهنمایی بفرمایید.

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

post-26-0-09974800-1360756114_thumb.png

یک سوال هم در مورد مسیر جاری:

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

تشکر

ویرایش شده توسط sardar
لینک به ارسال
برای اینکه بیشتر متوجه بشید یک تصویر قرار میدهم. نسبت ارتفاعی که برای نوشته های تصویر زیردرنظر گرفته شده است در سمت راست 4 خط است که در صورت بیشتر بودن در سمت چپ قرار می گیرد البته با فاصله ای که در تصویر دیده می شود!

نمیدونم درست متوجه شدم یا خیر. شما میخواین ادامه مطلب بیاد زیر عکس؟

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

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

تست کنید:

function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> | ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " | ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}elseif (!is_home()){
echo bloginfo('name');
}
}

لینک به ارسال

مسیر جاری تغییری نکرد.

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

فکر میکنم سایت زیر گویا باشد.

سایت مورد نظر

لطفا این تایپیک هم نگاهی بیاندازید

لینک مطلب

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

آدرسی که دادید بسته هست. عکس سایتش رو هم بدید کافیه.

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

یعنی کلا تغییری نکرد؟

لینک به ارسال

تصویر مورد نظر:

post-26-0-88709500-1360872369_thumb.jpg

نوشته در 2 ستون قرار دارد!

در مورد مسیر جاری تغییری ایجاد نشد.

وقتی در صفحه ی اصلی هستم لینک صفحه ی اصلی نیست ولی جاهای دیگه مشکلی وجود ندارد. مثل ادامه ی مطلب موضوعات و...

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

برای مسیر:

function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> | ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " | ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}elseif (is_home()){
echo bloginfo('name');
}
}

برای چند ستونه در css3:

http://www.w3schools.com/css3/css3_multiple_columns.asp

مرورگهای جدید هم پشتیبانی میکنن

لینک به ارسال

مسیرجاری بخوبی کار کرد.تشکر

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


<div id="top-content">
<div id="post-title">
<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
</div>
<div id="thumbnail-post">
<a href="<?php the_permalink(); ?>">
<?php if(get_the_post_thumbnail()) { ?>
<?php the_post_thumbnail( array(250,250) ); ?>
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/img/noimage.jpg" height="150" width="150" border="0" />
<?php } ?>
</a>
</div>
<div id="top-content-text">
<?php the_content_rss('', TRUE, '', 180); ?>
<a href="<?php the_permalink() ?>" class="more-link">[ادامه...]
</a>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php endif; ?>

CSS:


#top-content{
float: right;
width: 500px;
height: 400px;
background: #E8E8E8;
margin: 10px 10px 0 0;
}
#post-title{
float: right;
color: #B8860B;
margin: 10px 20px 0 0;
}
#thumbnail-post{
float: left;
margin: 60px 0 0 10px;
}
#top-content-text{
float: right;
font-size: 13px;
text-align: justify;
width: 220px;
margin: 20px 10px 10px 0;
}

لینک به ارسال

آدرس یک صفحه از سایتتون رو بدید بهتره. در عمل راحتتر میشه بررسی و تست کرد.

لینک به ارسال

آدرس یک صفحه از سایتتون رو بدید بهتره. در عمل راحتتر میشه بررسی و تست کرد.

متاسفانه لوکاله!

لینک به ارسال

به ای دی #top-content کد زیر رو اضافه کنید:

 -moz-column-count:2;
-webkit-column-count:2;
column-count:2;

و تست کنید.

لینک به ارسال

به ای دی #top-content کد زیر رو اضافه کنید:

 -moz-column-count:2;
-webkit-column-count:2;
column-count:2;

و تست کنید.

به دو ستون تبدیل می شود. اما قسمت بالایی فضای خالی ایجاد میشود.

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

تشکر از لطفتون

لینک به ارسال

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

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

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

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

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

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

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

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

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