Mr.Mostafa 8 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 دروددوستان قطعا ملاحظه کردید که برخی قالب های وردپرس درشون مطالب به انتخاب کاربر در دو حالت قابل مشاهده هست اصطلاحا list و grid میشه مطالب رو دید یا به هر حالت دیگه اینمونه :http://www.yekmovie.tv/یا همیار وردپرسخواستم بدونم اسم خاصی داره این روش ؟من گشتم آموزشی پیدا نکردم ممنون میشم راهنمایی کنید و ترجیحا لینک یک آموزش بدید بهمتشکر نقل قول لینک به ارسال
SM-Mahdavi 5427 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 سلامراه ساده اینه که شما از تب بندی استفاده کنی. به این صورت که حالت grid داخل یک تب و حالت list هم داخل یک تب دیگه باشه. بعد روی کلیک دکمه مربوط به هر کدوم وضعیت نمایش رو تغییر میدین. چندین نمونه تب با جی کوئری:http://www.jqueryrain.com/example/jquery-tabs/ 4 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در فروردین 94 مالک گزارش بازنشر ارسال شده در فروردین 94 سلامراه ساده اینه که شما از تب بندی استفاده کنی. به این صورت که حالت grid داخل یک تب و حالت list هم داخل یک تب دیگه باشه. بعد روی کلیک دکمه مربوط به هر کدوم وضعیت نمایش رو تغییر میدین.چندین نمونه تب با جی کوئری:http://www.jqueryrai...le/jquery-tabs/تشکر بابت پاسختوناینکار از نظر سئو مشکلی پیش نمیاره ؟ چون خودمم به این روش فکر کرده بودم اما این روش لوپ پست ها رو دو بار داخل صفحه تکرار میکنه و به نظرم روی سئو تاثیر منفی داشته باشه اینطور نیست ؟شما همیار وردپرس رو چک کنید وقتی روی کلید های تغییر حالت کلیک میکنید پست ها تغییر میکنن تب تغییر نمیکنه نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در فروردین 94 گزارش بازنشر ارسال شده در فروردین 94 می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس 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>نمونه 6 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در فروردین 94 مالک گزارش بازنشر ارسال شده در فروردین 94 می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس 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>نمونهتشکر استاد منظور دقیقا همین بود پس با بوت استرپ هستمن موقع کد کردن از همین روش استفاده میکنم مشکلی بود مجددا داخل تاپیک اعلام میکنمتشکر از هر دو عزیز نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در اردیبهشت 94 مالک گزارش بازنشر ارسال شده در اردیبهشت 94 می تونید با کلاس دهی و دستور جی کوئری هم انجامش بدید مثلا با کلاس های بوت استراپ می تونید به کلاس 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 میشه میخوام در کوکی ها سیو بشه انتخاب کاربرتشکر مجدد نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اردیبهشت 94 گزارش بازنشر ارسال شده در اردیبهشت 94 مرحله اول کدهای جی کوئری ساخت کوکی $(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>نتیجه رو هم می تونید در همون نمونه ببینید 2 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در خرداد 94 مالک گزارش بازنشر ارسال شده در خرداد 94 (ویرایش شده) مرحله اول کدهای جی کوئری ساخت کوکی$(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 ها امکانش هست کد های کوکی رو تغییر بدید برای من ؟سپاسگذارم ویرایش شده خرداد 94 توسط Mr.Mostafa نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در خرداد 94 گزارش بازنشر ارسال شده در خرداد 94 <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> 1 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در خرداد 94 مالک گزارش بازنشر ارسال شده در خرداد 94 <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>الان با این شرایط کلاس ها سویچ میشن و عمل انجام میشه فقط مشکلم کوکی هستش که نتونستم بهش اضافه کنم نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در خرداد 94 گزارش بازنشر ارسال شده در خرداد 94 اولین نکته اینکه چرا دو تا دایو برای نمایش لیست و گرید دارید؟ باید یک 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> 4 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در خرداد 94 مالک گزارش بازنشر ارسال شده در خرداد 94 @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 توی کدی که زحمت کشیدید قرار دادید ردی از این دو کلاس نیست حدث میزنم برای همین عمل نمیکنهبدون شک اشتباه از من هست بیشتر از این مزاحم اوقاتتون نمیشم سعی میکنم با دستکاری کد ها به نتیجه برسمسپاس بیکران از وقتی که گذاشتید ایشالا بتونم جبران زحمت کنم نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در خرداد 94 گزارش بازنشر ارسال شده در خرداد 94 عرض کردم که بجای این دو تا کلاس div ها را به شکلی که عرض شد بگذارید دقیقا باید همین ساختار را رعایت کنید استایل را هم اضافه کنید مشکلی نخواهید داشت کدها را دستکاری نکنیداگر موفق نشدید کدهای index.php یا فایلی که می خواهید list و grid را نمایش دهد بگذارید اینجانکته: قراره به نتیجه برسید با توجه به اینکه خودتون دارید کارتون رو انجام می دید نه مشکلی برای من داره نه هزینه ای برای شما چون هدف یادگیریه و این تنها راهشه باید یکبار مسیر را درست برید تا برای همیشه مشکلتون با ساخت کوکی برطرف بشه 4 نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در خرداد 94 مالک گزارش بازنشر ارسال شده در خرداد 94 عرض کردم که بجای این دو تا کلاس div ها را به شکلی که عرض شد بگذاریددقیقا باید همین ساختار را رعایت کنید استایل را هم اضافه کنید مشکلی نخواهید داشتکدها را دستکاری نکنیداگر موفق نشدید کدهای index.php یا فایلی که می خواهید list و grid را نمایش دهد بگذارید اینجانکته: قراره به نتیجه برسید با توجه به اینکه خودتون دارید کارتون رو انجام می دید نه مشکلی برای من داره نه هزینه ای برای شما چون هدف یادگیریه و این تنها راهشه باید یکبار مسیر را درست برید تا برای همیشه مشکلتون با ساخت کوکی برطرف بشهاستاد من کد ها رو خدمتتون پیغام خصوصی کردم محتواشون خصوصی بود نشد داخل تاپیک قرار بدم از این بابت پوزش میخوامنکته: قراره به نتیجه برسید با توجه به اینکه خودتون دارید کارتون رو انجام می دید نه مشکلی برای من داره نه هزینه ای برای شما چون هدف یادگیریه و این تنها راهشه باید یکبار مسیر را درست برید تا برای همیشه مشکلتون با ساخت کوکی برطرف بشهلطفتون رو میرسونه عزیز نقل قول لینک به ارسال
Mr.Mostafa 8 ارسال شده در خرداد 94 مالک گزارش بازنشر ارسال شده در خرداد 94 با تشکر از استاد عزیز @imanfakhar مشکل حل شد 1 نقل قول لینک به ارسال
iranibazar 9 ارسال شده در مهر 94 گزارش بازنشر ارسال شده در مهر 94 استاد ارجمند ، از راهنمایی شما بسیار ممنونم . خیلی مفید و کاربردی بود .من سوالم رو برای طور دیگری از نمایش بیان می کنم ..اگر ما برای قالب صفحه اول دوتا فایل داشته باشیم .. یعنی یک فایل به حالت لیست که پیشفرض سایته و به نام index.php هست و فایلی به نام grid.php که برای نمایش شبکه محصولات صفحه اول است . بدین منظور که اگر نام grid.php رو به ایندکس تغییر بدیم ، سایت به صورت نمایش شبکه بالا بیاد .حال اگر بخواهیم روش فوق را که فرمودید ، برای تعویض قالب ، نه تعویض استایل ( هردو فایل از یک استایل style.css استفاده می کنند ) استفاده کنیم و با یک دکمه بخواهیم که این دوفایل برای نمایش جایگزین هم بشن ، چکار باید بکنیم ؟؟یعنی با فشار یک دکمه سایت به صورت شبکه ای و با کلیک بر روی دکمه ای دیگر ، سایت به ص.رت لیست نمایش داده بشه . ممنون میشم راهنمایی بفرمائید . نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 94 گزارش بازنشر ارسال شده در مهر 94 اول از همه اول فایل grid.php وارد کنید /*template name: grid*/و بعد از پیشخوان یک برگه به نام grid و با استفاده از قالب grid منتشر کنید و لینکهاتون رو به صورت زیر قرار بدید<a href="<?php bloginfo('url');?>">لیست</a><a href="<?php echo get_permalink('grid');?>" >گرید</a> 2 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .