رفتن به مطلب

نمایش مطالب وردپرس در دو ساختار list و grid


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

درود

دوستان قطعا ملاحظه کردید که برخی قالب های وردپرس درشون مطالب به انتخاب کاربر در دو حالت قابل مشاهده هست اصطلاحا list و grid میشه مطالب رو دید یا به هر حالت دیگه ای

نمونه :


http://www.yekmovie.tv/

یا همیار وردپرس

خواستم بدونم اسم خاصی داره این روش ؟

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

تشکر

لینک به ارسال

سلام

راه ساده اینه که شما از تب بندی استفاده کنی. به این صورت که حالت grid داخل یک تب و حالت list هم داخل یک تب دیگه باشه. بعد روی کلیک دکمه مربوط به هر کدوم وضعیت نمایش رو تغییر میدین.

چندین نمونه تب با جی کوئری:

http://www.jqueryrain.com/example/jquery-tabs/

لینک به ارسال

سلام

راه ساده اینه که شما از تب بندی استفاده کنی. به این صورت که حالت grid داخل یک تب و حالت list هم داخل یک تب دیگه باشه. بعد روی کلیک دکمه مربوط به هر کدوم وضعیت نمایش رو تغییر میدین.

چندین نمونه تب با جی کوئری:

http://www.jqueryrai...le/jquery-tabs/

تشکر بابت پاسختون

اینکار از نظر سئو مشکلی پیش نمیاره ؟ چون خودمم به این روش فکر کرده بودم اما این روش لوپ پست ها رو دو بار داخل صفحه تکرار میکنه و به نظرم روی سئو تاثیر منفی داشته باشه اینطور نیست ؟

شما همیار وردپرس رو چک کنید وقتی روی کلید های تغییر حالت کلیک میکنید پست ها تغییر میکنن تب تغییر نمیکنه

لینک به ارسال

می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس post به اینصورت افکت بدید


<?php while(have_posts()) : ?>
<div class="post col-sm-12">
کدهای داخل حلقه
</div><?php endwhile;?>
<div class="btn btn-primary" id="toggle-posts-class">تغییر حالت </div>
<script>
$("#toggle-posts-class").click(function() {
$(".post").toggleClass("col-sm-12").toggleClass("col-sm-4")
});
</script>

نمونه

لینک به ارسال

می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس post به اینصورت افکت بدید


<?php while(have_posts()) : ?>
<div class="post col-sm-12">
کدهای داخل حلقه
</div><?php endwhile;?>
<div class="btn btn-primary" id="toggle-posts-class">تغییر حالت </div>
<script>
$("#toggle-posts-class").click(function() {
$(".post").toggleClass("col-sm-12").toggleClass("col-sm-4")
});
</script>

نمونه

تشکر استاد منظور دقیقا همین بود پس با بوت استرپ هست

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

تشکر از هر دو عزیز

لینک به ارسال

می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس post به اینصورت افکت بدید


<?php while(have_posts()) : ?>
<div class="post col-sm-12">
کدهای داخل حلقه
</div><?php endwhile;?>
<div class="btn btn-primary" id="toggle-posts-class">تغییر حالت </div>
<script>
$("#toggle-posts-class").click(function() {
$(".post").toggleClass("col-sm-12").toggleClass("col-sm-4")
});
</script>

نمونه

@imanfakhar عزیز از راهنماییتون استفاده کردم و به راحتی همون چیزی که نیاز داشتم رو انجام داد برام تشکر ، الان همین کد رو بخوام با استفاده از jquery توسط کوکی ها ذخیره کنه انتخاب کاربر رو چه چیزی باید بهش اضافه کنم ؟

برای مثال کاربری نمایش grid رو انتخاب میکنه اما بعد از رفرش حالت نمایش مجددا list میشه میخوام در کوکی ها سیو بشه انتخاب کاربر

تشکر مجدد

لینک به ارسال

مرحله اول کدهای جی کوئری ساخت کوکی


$(document).ready(function() {
$("#toggle-view li a").click(function() {
var cls = $(this).parent("li").attr("data-cls");
var cls = cls+" post";
$(this).parent('li').parent('ul').find("li").removeClass("active").filter($(this).parent("li")).addClass("active");
$(".post").each(function() {
$(this).removeClass().addClass(cls).show();
});
createCookie('toggleviewlia',cls,365);
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

مرحله دوم کدهای php خواندن و اجرای کوکی (در ابتدای فایل index.php)


<?php if(isset($_COOKIE['toggleviewlia'])) {
$postclass = $_COOKIE['toggleviewlia'];
}
else {
$postclass = 'post col-md-4';
}
if($postclass == 'post col-md-4') {
$toggle_active = '#grid';
}
else {
$toggle_active = '#list';
}
?>

مرحله سوم ساختار منوی ناوبری (در header)


<ul id="toggle-view" class="navbar"><li id="grid" data-cls="col-md-4"><a>Grid</a></li><li id="list" data-cls="col-md-12"><a>List</a></li></ul>

مرحله چهارم کلاس post (اولین دایو داخل حلقه)


<div class="<?php echo $postclass;?>">
...
</div>

مرحله پنجم اسکریپت اکتیو نمودن کلید معتبر (در فوتر )


<script>
$("<?php echo $toggle_active;?>").addClass("active");
</script>

نتیجه رو هم می تونید در همون نمونه ببینید

لینک به ارسال
  • 1 ماه بعد...

مرحله اول کدهای جی کوئری ساخت کوکی


$(document).ready(function() {
$("#toggle-view li a").click(function() {
var cls = $(this).parent("li").attr("data-cls");
var cls = cls+" post";
$(this).parent('li').parent('ul').find("li").removeClass("active").filter($(this).parent("li")).addClass("active");
$(".post").each(function() {
$(this).removeClass().addClass(cls).show();
});
createCookie('toggleviewlia',cls,365);
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

مرحله دوم کدهای php خواندن و اجرای کوکی (در ابتدای فایل index.php)


<?php if(isset($_COOKIE['toggleviewlia'])) {
$postclass = $_COOKIE['toggleviewlia'];
}
else {
$postclass = 'post col-md-4';
}
if($postclass == 'post col-md-4') {
$toggle_active = '#grid';
}
else {
$toggle_active = '#list';
}
?>

مرحله سوم ساختار منوی ناوبری (در header)


<ul id="toggle-view" class="navbar"><li id="grid" data-cls="col-md-4"><a>Grid</a></li><li id="list" data-cls="col-md-12"><a>List</a></li></ul>

مرحله چهارم کلاس post (اولین دایو داخل حلقه)


<div class="<?php echo $postclass;?>">
...
</div>

مرحله پنجم اسکریپت اکتیو نمودن کلید معتبر (در فوتر )


<script>
$("<?php echo $toggle_active;?>").addClass("active");
</script>

نتیجه رو هم می تونید در همون نمونهببینید

@imanfakhar استاد واقعیتش من سردرگم شدم

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


<script>
$("#toggle-posts-class").click(function() {
$(".post").toggleClass("list_post").toggleClass("grid-post");
$(".tpbtn").toggleClass("tpselected").toggleClass("tpnoselected")
});
</script>

که html هم اوکی هست و کار میکنه به درستی تنها مشکلش سیو نشدن کوکی هاست الان مطابق با این class ها امکانش هست کد های کوکی رو تغییر بدید برای من ؟

سپاسگذارم

ویرایش شده توسط Mr.Mostafa
لینک به ارسال

<script>
$(document).ready(function() {
$("#toggle-posts-class").click(function() {
if($(this).hasClass("grid-post-ok")) {
var cls = 1;
$(this).removeClass("grid-post-ok").addClass("list-post-ok");
$(".post").addClass("list_post").removeClass("grid-post");
$(".tpbtn").addClass("tpselected").removeClass("tpnoselected");
}
else {
var cls =2;
$(this).addClass("grid-post-ok").removeClass("list-post-ok");
$(".post").removeClass("list_post").addClass("grid-post");
$(".tpbtn").removeClass("tpselected").addClass("tpnoselected");
}
createCookie('toggleviewlia',cls,365);
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
<?php if(isset($_COOKIE['toggleviewlia']) && $_COOKIE['toggleviewlia']==2) {
$postclass = "grid-post";
$tpbtn = "tpnoselected";
$toggle = "grid-post-ok";
}
else {
$postclass = "list-post";
$tpbtn = "tpselected";
$toggle = "list-post-ok";
}
?>
<div class="post <?php echo $postclass;?>">
...
</div>
<button class="tpbtn <?php echo $tpbtn;?>">
...
</button>
<a id="toggle-posts-class" class="<?php echo $toggle;?>">
....
</a>

لینک به ارسال


<script>
$(document).ready(function() {
$("#toggle-posts-class").click(function() {
if($(this).hasClass("grid-post-ok")) {
var cls = 1;
$(this).removeClass("grid-post-ok").addClass("list-post-ok");
$(".post").addClass("list_post").removeClass("grid-post");
$(".tpbtn").addClass("tpselected").removeClass("tpnoselected");
}
else {
var cls =2;
$(this).addClass("grid-post-ok").removeClass("list-post-ok");
$(".post").removeClass("list_post").addClass("grid-post");
$(".tpbtn").removeClass("tpselected").addClass("tpnoselected");
}
createCookie('toggleviewlia',cls,365);
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
<?php if(isset($_COOKIE['toggleviewlia']) && $_COOKIE['toggleviewlia']==2) {
$postclass = "grid-post";
$tpbtn = "tpnoselected";
$toggle = "grid-post-ok";
}
else {
$postclass = "list-post";
$tpbtn = "tpselected";
$toggle = "list-post-ok";
}
?>
<div class="post <?php echo $postclass;?>">
...
</div>
<button class="tpbtn <?php echo $tpbtn;?>">
...
</button>
<a id="toggle-posts-class" class="<?php echo $toggle;?>">
....
</a>

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

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

کل کد هایی که استفاده کردم رو قرار میدم الان با این کد ها به درستی عمل میکنه یه کلاس post-show به post-dont-show تغییر داده شده که کلاس post-dont-show داخل Css ها بهش display: none دادم تا وقتی روی دکمه ها کلید میشه کلاس ها جابجا میشن یکی از لوپ ها مخفی میشه و دیگری نمایش داده میشه

بخش script :


<script>
$("#toggle-posts-class").click(function() {
$(".post").toggleClass("post-show").toggleClass("post-dont-show");
$(".tpbtn").toggleClass("tpselected").toggleClass("tpnoselected")
});
</script>

اولین گزینه مال همون پست هاست دومی هم مال button هاس که وقتی اکتیو میشه رنگش تغییر میکنه

این هم بخش html کلید هاست :


<div class="toggle-posts change_cat_posts" id="toggle-posts-class">View as:
<span class="tpbtn tp-list tpnoselected"></span>
<span class="tpbtn tp-grid tpselected"></span>
</div>

و این هم div پست ها اولی لیست پست و دومی گرید :


<div class="post list-post post-dont-show <?php echo $postclass;?>">
</div>


<div class="post grid-post post-show <?php echo $postclass;?>">
</div>

الان با این شرایط کلاس ها سویچ میشن و عمل انجام میشه فقط مشکلم کوکی هستش که نتونستم بهش اضافه کنم

لینک به ارسال

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


<div class="post <?php echo $postclass;?>">
<div class="post-list">
...
</div>
<div class="post-grid">
...
</div>
</div>

و در استایل دهی استایل بدید:


.list-post .post-grid {display:none;}
.grid-post .post-list {display:none;}

اسکریپت


$(document).ready(function() {
$("#toggle-posts-class").find(".tpbtn").click(function() {
if(!$(this).hasClass("tpselected")) {
if($(this).hasClass("tp-grid")) {
var cls = 2;
$(this).removeClass("tpnoselected").addClass("tpselected");
$(".post").addClass("list_post").removeClass("grid-post");
}
else {
var cls =1;
$(this).removeClass("tpnoselected").addClass("tpselected");
$(".post").removeClass("list_post").addClass("grid-post");
}
createCookie('toggleviewlia',cls,365);
}
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

کد فراخوانی


<?php if(isset($_COOKIE['toggleviewlia']) && $_COOKIE['toggleviewlia']==2) {
$toggleviewlia = 2;
$postclass = "grid-post";
}
else {
$toggleviewlia = 1;
$postclass = "list-post";
}
?>

این هم می شه کلیدهاتون


<div class="toggle-posts change_cat_posts" id="toggle-posts-class">View as:
<span class="tpbtn tp-list <?php if($toggleviewlia==1) { echo 'tpselected';} else { echo 'tpnoselected';}?>"></span>
<span class="tpbtn tp-grid <?php if($toggleviewlia==2) { echo 'tpselected';} else { echo 'tpnoselected';}?>"></span>
</div>

لینک به ارسال

@imanfakhar عزیز تو تا div پست جدا الان کلا دارم داخل loop

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


<div class="post <?php echo $postclass;?>">
<div class="post-list">
...
</div>
<div class="post-grid">
...
</div>
</div>

و در استایل دهی استایل بدید:


.list-post .post-grid {display:none;}
.grid-post .post-list {display:none;}

اسکریپت


$(document).ready(function() {
$("#toggle-posts-class").find(".tpbtn").click(function() {
if(!$(this).hasClass("tpselected")) {
if($(this).hasClass("tp-grid")) {
var cls = 2;
$(this).removeClass("tpnoselected").addClass("tpselected");
$(".post").addClass("list_post").removeClass("grid-post");
}
else {
var cls =1;
$(this).removeClass("tpnoselected").addClass("tpselected");
$(".post").removeClass("list_post").addClass("grid-post");
}
createCookie('toggleviewlia',cls,365);
}
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

کد فراخوانی


<?php if(isset($_COOKIE['toggleviewlia']) && $_COOKIE['toggleviewlia']==2) {
$toggleviewlia = 2;
$postclass = "grid-post";
}
else {
$toggleviewlia = 1;
$postclass = "list-post";
}
?>

این هم می شه کلیدهاتون


<div class="toggle-posts change_cat_posts" id="toggle-posts-class">View as:
<span class="tpbtn tp-list <?php if($toggleviewlia==1) { echo 'tpselected';} else { echo 'tpnoselected';}?>"></span>
<span class="tpbtn tp-grid <?php if($toggleviewlia==2) { echo 'tpselected';} else { echo 'tpnoselected';}?>"></span>
</div>

واقعیتش بازم موفق نشدم استاد عزیز من تاگل کلس ها رو تغییر دادم به post-dont-show و post-show توی کدی که زحمت کشیدید قرار دادید ردی از این دو کلاس نیست حدث میزنم برای همین عمل نمیکنه

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

سپاس بیکران از وقتی که گذاشتید ایشالا بتونم جبران زحمت کنم

لینک به ارسال

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

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

کدها را دستکاری نکنید

اگر موفق نشدید کدهای index.php یا فایلی که می خواهید list و grid را نمایش دهد بگذارید اینجا

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

لینک به ارسال

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

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

کدها را دستکاری نکنید

اگر موفق نشدید کدهای index.php یا فایلی که می خواهید list و grid را نمایش دهد بگذارید اینجا

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

استاد من کد ها رو خدمتتون پیغام خصوصی کردم محتواشون خصوصی بود نشد داخل تاپیک قرار بدم از این بابت پوزش میخوام

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

لطفتون رو میرسونه عزیز :wub:

لینک به ارسال
  • 4 ماه بعد...

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

من سوالم رو برای طور دیگری از نمایش بیان می کنم ..

اگر ما برای قالب صفحه اول دوتا فایل داشته باشیم .. یعنی یک فایل به حالت لیست که پیشفرض سایته و به نام index.php هست و فایلی به نام grid.php که برای نمایش شبکه محصولات صفحه اول است . بدین منظور که اگر نام grid.php رو به ایندکس تغییر بدیم ، سایت به صورت نمایش شبکه بالا بیاد .

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

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

ممنون میشم راهنمایی بفرمائید .

لینک به ارسال

اول از همه اول فایل grid.php وارد کنید


/*template name: grid*/

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


<a href="<?php bloginfo('url');?>">لیست</a>
<a href="<?php echo get_permalink('grid');?>" >گرید</a>

لینک به ارسال

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

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

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

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

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

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

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

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

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