درود
خواستم از دوستان متخصص در عرصه وردپرس سوالی داشته باشم.
چگونه می تواند مانند تصویر زیر چنین چیزی را طراحی کرد اسم این مدل چیست؟
یک راهنمایی کوچک کافی است.
فایل پیوست 36357
سپاس گزارم از تمامی دوستان
نمایش نسخه قابل چاپ
درود
خواستم از دوستان متخصص در عرصه وردپرس سوالی داشته باشم.
چگونه می تواند مانند تصویر زیر چنین چیزی را طراحی کرد اسم این مدل چیست؟
یک راهنمایی کوچک کافی است.
فایل پیوست 36357
سپاس گزارم از تمامی دوستان
قالب های زیادی برای گالری سازی به این شکل وجود دارد.نقل قول:
نوشته اصلی توسط TheOnlyMen
لینک وب سایت رو بگذارید، بیشتر راهنمایی کنم.
این پیشنمایش قالب است
http://www.rtl-theme.com/theme-demo/30590/
فقط قسمتی که عکس دادید رو نیاز دارید؟نقل قول:
نوشته اصلی توسط TheOnlyMen
به صورت کد و یا به صورت افزونه قابل استفاده است.
افزونه های مشابه:
https://wordpress.org/plugins/photonic
https://wordpress.org/plugins/final-...d-gallery-lite
و ...
بله
اسم این سازه چیست؟
ممنون می شم که مقداری از کدنویسی آن را در اختیار ما قرار دهید
1- کد HTML رو باید در هر قسمت که نیاز دارید بگذارید.نقل قول:
نوشته اصلی توسط TheOnlyMen
2- کدهای css را به انتهای style.css قالب خود اضافه کنید:کد:<div class="headline__wrapper">
<div class="headline__block">
<div class="headline__column headline__column--one">
<div class="headline__item headline__item--wide headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d9%87%db%8c%d9%88%d9%86%d8%af%d8%a7%db%8c-%d8%aa%d9%88%d8%b3%d8%a7%d9%86-2017-%da%a9%d8%b1%d8%a7%d8%b3-%d8%a7%d9%88%d9%88%d8%b1-%d8%ac%d8%b0%d8%a7%d8%a8-%d9%88-%d9%85%d8%ad%d8%a8%d9%88%d8%a8-%d8%a7/">
<figure class="headline__image"> <img width="522" height="295" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-610x345.jpg" class="attachment-524x295 size-524x295 wp-post-image" alt="" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-160x91.jpg 160w" sizes="(max-width: 522px) 100vw, 522px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>2 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">هیوندای توسان ۲۰۱۷ کراس اوور جذاب و محبوب ایرانیان</h3>
</div>
</a> </div>
</div>
<div class="headline__column headline__column--double">
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a8%d8%a7%d8%b2%db%8c-gta-%d8%a8%d9%87-%d9%81%d9%86%d8%a7%d9%88%d8%b1%db%8c-%d8%ae%d9%88%d8%af%d8%b1%d8%a7%d9%86-%d8%ae%d9%88%d8%af%d8%b1%d9%88%d9%87%d8%a7-%da%a9%d9%85%da%a9-%d9%85%db%8c%e2%80%8c/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-262x147.png" class="attachment-262x147 size-262x147 wp-post-image" alt="خودرو" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-262x147.png 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-610x345.png 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-730x410.png 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-100x56.png 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-380x215.png 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-160x91.png 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">اخبار خودرو</span>
<div class="headline__content__time">
<time>2 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">بازی GTA به فناوری خودران خودروها کمک می‌کند</h3>
</div>
</a> </div>
</div>
<div class="headline__column headline__column--double">
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%aa%d9%88%db%8c%d9%88%d8%aa%d8%a7-%da%a9%d9%85%d8%b1%db%8c-2018-%d9%88-%d9%88%db%8c%da%98%da%af%db%8c-%d9%87%d8%a7%db%8c-%d8%ac%d8%af%db%8c%d8%af-%d9%88-%d8%ac%d8%b0%d8%a7%d8%a8-%d8%a2%d9%86/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="CAMERY" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-730x410.jpg 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">تویوتا کمری ۲۰۱۸ و ویژگی های جدید و جذاب آن</h3>
</div>
</a> </div>
</div>
</div><!-- ./ headline__block -->
<div class="headline__block">
<div class="headline__column headline__column--double"> <div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%b3%d8%a7%d9%85%d8%b3%d9%88%d9%86%da%af-%d8%b7%d8%b1%d8%ad-%db%8c%da%a9-%d8%aa%d8%a8%d9%84%d8%aa-%d8%aa%d8%a7%d8%b4%d9%88-%d8%b1%d8%a7-%d8%ab%d8%a8%d8%aa-%da%a9%d8%b1%d8%af/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="tablet_" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-730x410.jpg 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">تبلت</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">سامسونگ طرح یک تبلت تاشو را ثبت کرد</h3>
</div>
</a> </div>
<div class="headline__item headline__item--tall headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a8%d8%b1%d8%b1%d8%b3%db%8c-%d8%aa%d8%a8%d9%84%d8%aa-%d8%b3%d8%b1%d9%81%db%8c%d8%b3-%d9%be%d8%b1%d9%88-4-%d9%85%d8%a7%db%8c%da%a9%d8%b1%d9%88%d8%b3%d8%a7%d9%81%d8%aa/">
<figure class="headline__image"> <img width="262" height="175" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet.jpg" class="attachment-262x295 size-262x295 wp-post-image" alt="tablet" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet.jpg 750w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet-300x200.jpg 300w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">بررسی</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">بررسی تبلت سرفیس پرو ۴ مایکروسافت</h3>
</div>
</a> </div>
</div> <div class="headline__column headline__column--double">
<div class="headline__item headline__item--tall headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d9%85%d9%88%d8%aa%d9%88%d8%b1%d8%b3%db%8c%da%a9%d9%84%d8%aa-%d9%87%d9%88%d9%86%d8%af%d8%a7-%d8%a8%d8%a7-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d8%ad%d9%81%d8%b8-%d8%aa%d8%b9%d8%a7%d8%af%d9%84-%d8%ae/">
<figure class="headline__image"> <img width="262" height="175" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda.jpg" class="attachment-262x295 size-262x295 wp-post-image" alt="honda" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda.jpg 750w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda-300x200.jpg 300w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">موتورسیکلت هوندا با قابلیت حفظ تعادل خودکار معرفی شد</h3>
</div>
</a> </div>
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a7%db%8c%d9%84%d8%a7%d9%86-%d9%85%d8%a7%d8%b3%da%a9-%d8%b1%d9%88%d8%af%d8%b3%d8%aa%d8%b1-%d8%aa%d8%b3%d9%84%d8%a7-%d8%af%d8%b1-%d8%a2%db%8c%d9%86%d8%af%d9%87-%d9%86%d8%b2%d8%af%db%8c%da%a9-%d9%85/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="tesla" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">اخبار خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">ایلان ماسک: رودستر تسلا در آینده نزدیک معرفی می شود</h3>
</div>
</a> </div>
</div>
</div><!-- ./ headline__block -->
</div>
کد:.headline__wrapper{
- position: relative;
- z-index: 1;
- top: auto;
- right: auto;
- bottom: auto;
- left: auto;
- width: 100%;
}
.headline__block:nth-child(0n + 1) {
- clear: right;
}
.headline__block:nth-child(1n) {
- float: right;
- margin-left: 0;
- clear: none;
}
.headline__block {
- width: calc(99.999999% * 1/2);
}
* {
- box-sizing: border-box;
- -webkit-tap-highlight-color: transparent;
}
.headline__column--double:nth-child(1n) {
- float: right;
- margin-left: 0;
- clear: none;
}
.headline__column--double {
- width: calc(99.999999% * 1/2);
}
.headline__item--wide {
- width: 100%;
- height: 295px;
- border-bottom: 1px solid #e5e5e5;
- border-right: 1px solid #e5e5e5;
}
.headline__item {
- width: 100%;
- position: relative;
- z-index: 1;
- top: 0px;
- right: auto;
- bottom: auto;
- left: 0px;
- display: block;
- overflow: hidden;
}
.headline__item a{
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
- text-decoration: none;
- color: #ffffff;
}
.headline__image {
- margin: 0px;
- padding: 0px;
- height: inherit;
}
.headline__item--wide .headline__content {
- padding: 0px 30px 30px 30px;
}
.headline__content{
- width: 100%;
- position: absolute;
- z-index: 2;
- top: auto;
- right: auto;
- bottom: 0px;
- left: auto;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
}
.headline__image img {
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- height: 100%;
}
img {
- max-width: 100%;
- height: auto;
}
.headline__item--wide .headline__content {
- padding: 0px 30px 30px 30px;
}
.headline__content{
- width: 100%;
- position: absolute;
- z-index: 2;
- top: auto;
- right: auto;
- bottom: 0px;
- left: auto;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
}
.headline__content__row {
- width: 100%;
- position: relative;
- display: block;
}
.headline__item--wide .headline__content__title {
- font-size: 0.9em;
}
.headline__content__title {
- font-family: IRANSans;
- line-height: normal;
- font-weight: 500;
- font-style: normal;
- color: #ffffff;
- text-align: right;
- text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
- margin: 5px 0px 0px 0px;
- padding: 0px;
}
.headline__item--news .headline__content__category {
- background-color: #ff9800;
}
.headline__content__category {
- padding: 1px 6px 2px 6px;
- text-align: center;
- color: #ffffff;
- font-family: IRANSans;
- font-size: 0.625em;
- line-height: normal;
- width: auto;
- display: table-cell;
- float: right;
}
.headline__content__time {
- font-size: 0.75em;
- color: #ffffff;
- font-family: IRANSans;
- font-size: 0.625em;
- line-height: normal;
- font-style: normal;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
- opacity: 1;
- display: table-cell;
- margin-right: 5px;
- float: right;
}
.headline__content__time time {
- position: relative;
- z-index: 1;
- top: auto;
- right: auto;
- bottom: auto;
- font-family: IRANSans-num;
- left: auto;
- float: right;
- direction: rtl;
- display: table-cell;
- vertical-align: middle;
- height: 19px;
}
وای دمت گرم داش
فکر کنم خودم توانای استخراج سورسش رو داشتم.=))
سپاس
چرا از ابتدا این کار رو نکردید؟ بهترین کار در اسکریپت استفاده کمتر از ماژول ها و افزونه ها جهت جلوگیری از ایجاد تیبل های اضافه در دیتابیس هست.نقل قول:
نوشته اصلی توسط TheOnlyMen
به دل نگیر جهت مزاح گفتم
:53::53::53::53::53:در سه صورت از شما ممنونم:53::53::53::53::53:
دلخور نشدم دوست عزیز، محض اطلاع و راهنمایی عرض کردم.نقل قول:
نوشته اصلی توسط TheOnlyMen
در هر صورت اگر مجدد مشکلی بود اطلاع دهید، پاسخگو هستم.
موفق باشید
درود صبح بخیر
حالا که به دل نگرفتی بزار درست توضیح بدم.
هر کدام از این بلاک ها در یک اندازه متفاوت است پس حتما برای نمایش در وردپرس باید داخل حلقه قرار بگیرد اما حلقه وردپرس وظیفه تکرار دایوی رو داره که درون اون باشه پس زمانی که ما چندین دایو رو با کلاس های متفاوت داریم رو چگونه طراحی کنیم که آخرین مطالب سایت رو در این بلاک های متفاوت به نمایش در بیاورد
آیا هک کدنویسی خاصی را باید به جای حلقه وردپرس به کار برد؟
سپاس
از ویژگی offset وردپرس استفاده کنید مشکلتون حل میشهنقل قول:
نوشته اصلی توسط TheOnlyMen
درود
دوست عزیز میشه مقداری در مورد این مبحث توضیح دهید یا اینکه منبع ای به ما ارجاع دهید.
سپاس گزارم
به عنوان مثال شما می‌تونید برای هر کدوم از اون بلاک‌ها کوئری جداگانه بنویسید (البته این مورد رو نمیدونم از لحاظ فنی و امنیتی مشکلی داره یا نه)نقل قول:
نوشته اصلی توسط TheOnlyMen
مثلا بلاک اول شما کوئری زیر رو میگیره
کوئری بلاک دوم هم به صورت زیر میشهکد PHP:<?php query_posts("showposts=1"); ?>
و همینطور الی آخر که به تعداد پستهایی که میخواید رد بشه عدد offset رو بیشتر میکنیدکد PHP:<?php query_posts("showposts=1&offset=1"); ?>
یکم باهاش ور برید میبینید که کاری نداره و راحته
فقط بازم میگم از لحاظ فنی و امنیتی نمیدونم این کار مشکل یا ایرادی داره یا نه که اینو دوستان متخصص نظر بدن خیلی بهتره
موفق باشید
از شما بسیار سپاس گزارم