درود
خواستم از دوستان متخصص در عرصه وردپرس سوالی داشته باشم.
چگونه می تواند مانند تصویر زیر چنین چیزی را طراحی کرد اسم این مدل چیست؟
یک راهنمایی کوچک کافی است.
00.PNG
سپاس گزارم از تمامی دوستان
چگونه باید چنین چیزی ساخت؟
درود
خواستم از دوستان متخصص در عرصه وردپرس سوالی داشته باشم.
چگونه می تواند مانند تصویر زیر چنین چیزی را طراحی کرد اسم این مدل چیست؟
یک راهنمایی کوچک کافی است.
00.PNG
سپاس گزارم از تمامی دوستان
پاسخ : چگونه باید چنین چیزی ساخت؟
قالب های زیادی برای گالری سازی به این شکل وجود دارد.نوشته اصلی توسط TheOnlyMen
لینک وب سایت رو بگذارید، بیشتر راهنمایی کنم.
پاسخ : چگونه باید چنین چیزی ساخت؟
این پیشنمایش قالب است
http://www.rtl-theme.com/theme-demo/30590/
پاسخ : چگونه باید چنین چیزی ساخت؟
فقط قسمتی که عکس دادید رو نیاز دارید؟
به صورت کد و یا به صورت افزونه قابل استفاده است.
افزونه های مشابه:
https://wordpress.org/plugins/photonic
https://wordpress.org/plugins/final-...d-gallery-lite
و ...
پاسخ : چگونه باید چنین چیزی ساخت؟
بله
اسم این سازه چیست؟
ممنون می شم که مقداری از کدنویسی آن را در اختیار ما قرار دهید
پاسخ : چگونه باید چنین چیزی ساخت؟
1- کد HTML رو باید در هر قسمت که نیاز دارید بگذارید.
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{} .headline__block:nth-child(0n + 1) {
- position: relative;
- z-index: 1;
- top: auto;
- right: auto;
- bottom: auto;
- left: auto;
- width: 100%;
} .headline__block:nth-child(1n) {
- clear: right;
} .headline__block {
- float: right;
- margin-left: 0;
- clear: none;
} * {
- width: calc(99.999999% * 1/2);
} .headline__column--double:nth-child(1n) {
- box-sizing: border-box;
- -webkit-tap-highlight-color: transparent;
} .headline__column--double {
- float: right;
- margin-left: 0;
- clear: none;
} .headline__item--wide {
- width: calc(99.999999% * 1/2);
} .headline__item {
- width: 100%;
- height: 295px;
- border-bottom: 1px solid #e5e5e5;
- border-right: 1px solid #e5e5e5;
} .headline__item a{
- width: 100%;
- position: relative;
- z-index: 1;
- top: 0px;
- right: auto;
- bottom: auto;
- left: 0px;
- display: block;
- overflow: hidden;
} .headline__image {
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
- text-decoration: none;
- color: #ffffff;
} .headline__item--wide .headline__content {
- margin: 0px;
- padding: 0px;
- height: inherit;
} .headline__content{
- padding: 0px 30px 30px 30px;
} .headline__image img {
- width: 100%;
- position: absolute;
- z-index: 2;
- top: auto;
- right: auto;
- bottom: 0px;
- left: auto;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
} img {
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- height: 100%;
} .headline__item--wide .headline__content {
- max-width: 100%;
- height: auto;
} .headline__content{
- padding: 0px 30px 30px 30px;
} .headline__content__row {
- 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__item--wide .headline__content__title {
- width: 100%;
- position: relative;
- display: block;
} .headline__content__title {
- font-size: 0.9em;
} .headline__item--news .headline__content__category {
- 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__content__category {
- background-color: #ff9800;
} .headline__content__time {
- 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 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;
}
- 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;
پاسخ : چگونه باید چنین چیزی ساخت؟
وای دمت گرم داش
فکر کنم خودم توانای استخراج سورسش رو داشتم.
سپاس
پاسخ : چگونه باید چنین چیزی ساخت؟
چرا از ابتدا این کار رو نکردید؟ بهترین کار در اسکریپت استفاده کمتر از ماژول ها و افزونه ها جهت جلوگیری از ایجاد تیبل های اضافه در دیتابیس هست.وای دمت گرم داش
فکر کنم خودم توانای استخراج سورسش رو داشتم.
سپاس
پاسخ : چگونه باید چنین چیزی ساخت؟
به دل نگیر جهت مزاح گفتم
در سه صورت از شما ممنونم
پاسخ : چگونه باید چنین چیزی ساخت؟
دلخور نشدم دوست عزیز، محض اطلاع و راهنمایی عرض کردم.به دل نگیر جهت مزاح گفتم
در سه صورت از شما ممنونم
در هر صورت اگر مجدد مشکلی بود اطلاع دهید، پاسخگو هستم.
موفق باشید
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)
مجوز های ارسال و ویرایش
پاسخ با نقل قول
