• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
sardar

کادربندی پست

17 پست در این موضوع قرار دارد

با سلام

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

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

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

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

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


<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;
}

0

به اشتراک گذاری این پست


لینک به پست


<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 استفاده کنید

4

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

2

به اشتراک گذاری این پست


لینک به پست

سلام

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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


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(); ?>

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

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

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

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

تشکر

ویرایش شده در توسط sardar
0

به اشتراک گذاری این پست


لینک به پست
برای اینکه بیشتر متوجه بشید یک تصویر قرار میدهم. نسبت ارتفاعی که برای نوشته های تصویر زیردرنظر گرفته شده است در سمت راست 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');
}
}

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

سایت مورد نظر

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

لینک مطلب

ویرایش شده در توسط sardar
0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

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

ویرایش شده در توسط sardar
0

به اشتراک گذاری این پست


لینک به پست

برای مسیر:

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

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

2

به اشتراک گذاری این پست


لینک به پست

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

متاسفانه نتونستم کاری انجام بدهم. چون بهم می خورد. من محتوای سند و 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;
}

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

و تست کنید.

2

به اشتراک گذاری این پست


لینک به پست

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

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

و تست کنید.

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری