آموزش های عمومیبخش وردپرسعمومینصب و سوالات اولیهوردپرس

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

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

نوشته : Mr Mostafa

درود

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

نمونه :


www.yekmovie.tv/

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

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

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

تشکر

نوشته : SM Mahdavi

سلام

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

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

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

نوشته : Mr Mostafa

سلام
راه ساده اینه که شما از تب بندی استفاده کنی. به این صورت که حالت grid داخل یک تب و حالت list هم داخل یک تب دیگه باشه. بعد روی کلیک دکمه مربوط به هر کدوم وضعیت نمایش رو تغییر میدین.
چندین نمونه تب با جی کوئری:
www.jqueryrai…le/jquery-tabs/

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

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

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

نوشته : imanfakhar

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




کدهای داخل حلقه

تغییر حالت


$("#toggle-posts-class").click(function() {
$(".post").toggleClass("col-sm-12").toggleClass("col-sm-4")
});

نمونه

نوشته : Mr Mostafa

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

کدهای داخل حلقه

تغییر حالت
نمونه

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

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

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

نوشته : Mr Mostafa

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

کدهای داخل حلقه

تغییر حالت
نمونه

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

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

تشکر مجدد

نوشته : imanfakhar

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


$(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)



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


<div class="">
...

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



$("").addClass("active");

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

نوشته : Mr Mostafa

مرحله اول کدهای جی کوئری ساخت کوکی
$(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)
Gridlist
مرحله چهارم کلاس post (اولین دایو داخل حلقه)

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

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

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



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

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

سپاسگذارم

نوشته : imanfakhar



$(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=/";
}

<?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 ">
...

<button class="tpbtn ">
...

<a id="toggle-posts-class" class="">
....

نوشته : Mr Mostafa

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


….

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

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

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

بخش script :



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

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

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


View as:



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


<div class="post list-post post-dont-show ">


<div class="post grid-post post-show ">

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

نوشته : imanfakhar

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


<div class="post ">

...


...


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


.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";
}
?>

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


View as:
<span class="tpbtn tp-list ">
<span class="tpbtn tp-grid ">

نوشته : Mr Mostafa

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

اولین نکته اینکه چرا دو تا دایو برای نمایش لیست و گرید دارید؟ باید یک 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”;
}
?>
این هم می شه کلیدهاتون
View as:

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

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

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

نوشته : imanfakhar

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

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

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

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

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

نوشته : Mr Mostafa

عرض کردم که بجای این دو تا کلاس div ها را به شکلی که عرض شد بگذارید
دقیقا باید همین ساختار را رعایت کنید استایل را هم اضافه کنید مشکلی نخواهید داشت
کدها را دستکاری نکنید
اگر موفق نشدید کدهای index.php یا فایلی که می خواهید list و grid را نمایش دهد بگذارید اینجا
نکته: قراره به نتیجه برسید با توجه به اینکه خودتون دارید کارتون رو انجام می دید نه مشکلی برای من داره نه هزینه ای برای شما چون هدف یادگیریه و این تنها راهشه باید یکبار مسیر را درست برید تا برای همیشه مشکلتون با ساخت کوکی برطرف بشه

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

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

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

نوشته : Mr Mostafa

با تشکر از استاد عزیز @imanfakhar مشکل حل شد

نوشته : iranibazar

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

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

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

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

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

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

نوشته : imanfakhar

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


/*template name: grid*/

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


<a href="api.yekmizban.com/redirect/" target="_blank" rel="noreferrer nofollow ">لیست
<a href="api.yekmizban.com/redirect/" target="_blank" rel="noreferrer nofollow " >گرید


(1) آموزش نمایش مطالب دسته بندی خاص در یک
آموزش نمایش مطالب دسته بندی خاص در یک برگه از وردپرس - پایگاه دانش میزبانفا


(2) آموزش نمایش آخرین مطالب وردپرس همراه با
آموزش نمایش آخرین مطالب وردپرس همراه با تصویر شاخص


(3) نمایش مطالب مرتبط در وردپرس بدون افزونه
نمایش مطالب مرتبط در وردپرس بدون افزونه افزونه نمایش مطالب مرتبط در وردپرس آموزش


(4) 5 افزونه برتر برای نمایش مطالب محبوب در
5 افزونه برتر برای نمایش مطالب محبوب در وردپرس نمایش مطالب برتر وردپرس


(5) کدنویسی قالب وردپرس
نمایش مطالب مرتبط بین محتوای نوشته در وردپرس طراح وردپرس طراحی قالب وردپرس طراحی سایت وردپرس کدنویسی قالب وردپرس


(6) وردپرس با post grid
نمایش پست ها بصورت شبکه ای در وردپرس با post grid آموزش ویدیویی


(7) نمایش لیستی پازلی محصولات در ووکامرس
نمایش لیستی پازلی محصولات در ووکامرس - نوین وردپرس WooCommerce Grid


(8) افزونه نمایش لیستی و شبکه ای محصولات
افزونه نمایش لیستی و شبکه ای محصولات ووکامرس GridList View for WooCommerce - پرشین اسکریپت


(9) آموزش نمایش مطالب دسته بندی خاص در یک
آموزش نمایش مطالب دسته بندی خاص در یک برگه از وردپرس وی میزبان ایرانیان

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دو × 1 =

همچنین ببینید
بستن
دکمه بازگشت به بالا