آموزش ساخت جعبه اطلاعات برای سایت‌های فیلم و سریال

3.3/5 - (3 امتیاز)

در این پست آموزش ساخت یک جعبه اطلاعات فیلم رو برای سایت‌های فیلم و سریال وردپرسی، شرح می‌دم.

مثل آموزش ساخت جعبه دانلود، برای ساخت جعبه اطلاعات فیلم هم نیاز به نصب افزونه Advanced Custom Fields دارید پس همین الان افزونه رو نصب و فعال کنید.

پیشنهاد می‌کنم این نوشته‌ها رو بخونید تا کار با این افزونه براتون راحت باشه:

Advanced Custom Fields یک پلاگین کامل!

آموزش ساخت جعبه دانلود ساده و پیشرفته (شبیه سایت آسان دانلود)

* ویژگی های این جعبه:

1) اطلاعات فیلم در سایت IMDB

2) ژانر

3) کیفیت

4) امتیاز

5) فرمت

6) حجم

7) محصول (برای مثال ایران)

8) زبان

9) کارگردان

10) بازیگران

11) زیرنویس فارسی

12) خلاصه داستان

1- ابتدا این تصاویر رو به پوشه images قالب وردپرس‌تون اضافه کنید:
دانلود تصاویر از لینک مستقیم – حجم: 2.61 کیلوبایت

2- کدهای زیر رو به فایل single.php در مکان دلخواه اضافه کنید:

<div class="videoinfobox">
<ul class="metabox">
<?php
if ( get_field('imdbname') ) {
echo '
<li class="imdblink">
<p style="padding-right:15px;"><strong>اطلاعات کامل در <a href="' . get_field('imdblink') . '">' . get_field('imdbname') . '</a></strong></p>
</li>';
}
if ( get_field('genre') ) {
echo '<li class="info">
<p>ژانر: <strong>' . get_field('genre') . '</strong></p>
</li>';
}
if ( get_field('quality') ) {
echo '<li class="info">
<p>کیفیت: <strong>' . get_field('quality') . '</strong></p>
</li>';
}
if ( get_field('rating') ) {
echo '<li class="info">
<p>امتیاز: <strong>' . get_field('rating') . '</strong></p>
</li>';
}
if ( get_field('format') ) {
echo '<li class="info">
<p>فرمت: <strong>' . get_field('format') . '</strong></p>
</li>';
}
if ( get_field('size') ) {
echo '<li class="info">
<p>حجم: <strong>' . get_field('size') . '</strong></p>
</li>';
}
if ( get_field('product') ) {
echo '<li class="info">
<p>محصول: <strong>' . get_field('product') . '</strong></p>
</li>';
}
if ( get_field('lang') ) {
echo '<li class="info">
<p>زبان: <strong>' . get_field('lang') . '</strong></p>
</li>';
}
if ( get_field('director') ) {
echo '<li class="info">
<p>کارگردان: <strong>' . get_field('director') . '</strong></p>
</li>';
}
if ( get_field('actors') ) {
echo '<li class="info">
<p>بازیگران: <strong>' . get_field('actors') . '</strong></p>
</li>';
}
if ( get_field('subtitle') ) {
echo '<li class="info">
<p>زیرنویس فارسی: <strong>' . get_field('subtitle') . '</strong></p>
</li>';
}
if ( get_field('synopsis') ) {
echo '<li class="info">
<p>خلاصه داستان:<br> <strong style="font-family: b yekan,comic sans ms; " id="comment" >' . get_field('synopsis') . '</strong></p>
</li>';
}
?>
</ul>
</div>

3- کدهای زیر رو هم به فایل style.css اضافه کنید:

.videoinfobox {
width: 460px;
height: auto;
background-repeat: no-repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-transition: all 0.5s ease-out 0s;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
font-size: 14px;
background-color: #bebbbb;
text-decoration: none;
background-position:-20px center;
paddin-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-right: 10px;
padding: 15px;
border: 5px solid #250;
font-family: B Yekan, Comic Sans MS;
}
.metabox {
line-height: 1.2;
font-family: B Yekan, Comic Sans MS;
}
ul.metabox {
list-style-type: none;
font-family: B Yekan, Comic Sans MS;
}
.imdblink {
background: url("images/imdb.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 23px;
font-family: B Yekan, Comic Sans MS;
}
.info {
background: url("images/star.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 23px;
font-family: B Yekan, Comic Sans MS;
}

4- خب حالا بریم سراغ تنظیمات افزونه:

1) به صفحه تنظیمات افزونه برید و روی ((افزودن)) کلیک کنید.

2) نام گروه زمینه رو وارد کنید. مثلا: جعبه اطلاعات فیلم.

3) اون مطالبی که آدرسشون رو در بالا دادم بخونید تا در اینجا دچار مشکل نشید. تنظیمات زیر رو برای افزونه انجام بدید:

a) روی دکمه ((+ افزودن زمینه)) کلیک کنید:
برچسب زمینه=نام لینک اطلاعات – نام زمینه=imdbname – مقدار پیش فرض=IMDB
b)روی دکمه ((+ افزودن زمینه)) کلیک کنید:
برچسب زمینه=لینک اطلاعات – نام زمینه=imdblink
c) دکمه ((+ افزودن زمینه)):
برچسب زمینه=ژانر – نام زمینه=genre
d) دکمه ((+ افزودن زمینه)):
برچسب زمینه=کیفیت – نام زمینه=quality
e) دکمه ((+ افزودن زمینه)):
برچسب زمینه=امتیاز – نام زمینه=rating
f) دکمه ((+ افزودن زمینه)):
برچسب زمینه=فرمت – نام زمینه=format
g) دکمه ((+ افزودن زمینه)):
برچسب زمینه=حجم – نام زمینه=size
h) دکمه ((+ افزودن زمینه)):
برچسب زمینه=محصول – نام زمینه=product
i) دکمه ((+ افزودن زمینه)):
برچسب زمینه=زبان – نام زمینه=lang
j) دکمه ((+ افزودن زمینه)):
برچسب زمینه=کارگردان – نام زمینه=director
k) دکمه ((+ افزودن زمینه)):
برچسب زمینه=بازیگران – نام زمینه=actors
l) دکمه ((+ افزودن زمینه)):
برچسب زمینه=زیرنویس فارسی – نام زمینه=subtitle
m) دکمه ((+ افزودن زمینه)):
برچسب زمینه=خلاصه داستان – نام زمینه=synopsis

* منتظر مراحل کمتری بودید؟ ببخشید کمتر از این دیگه نمیشد.

دکمه انتشار رو بزنید.

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

شاد و پیروز باشید.

3.3/5 - (3 امتیاز)

کانال تلگرام ماندگار وب

  1. علیرضا

    دمتون گرم عالی بود.
    حال اگر بخواهم این موارد به طور پیش فرض روی قالب باشد باید چه کار کنم؟مثلا پایین قسمت نوشته خودش چند text بیارد و قبل از هر text بنویسد امتیاز و ….

    1. Mekaeil Andisheh

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

  2. علی

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

    1. قائم امیدی

      سلام
      بله همین کار رو میکنه اما این افزونه همون طور که از کلمه ی Advanced در اسمش معلومه نسخه پیشرفته تر زمینه های دلخواه خود وردپرس هست و امکانات خیلی بیشتری داره.
      توضیحات سایت اصلی افزونه:
      افزونه زمینه های دلخواه پیشرفته یک افزونه رایگان وردپرس است که به عنوان یک لایه رابط کاربری گرافیکی برای زمینه های دلخواه عمل می کند. زمینه های دلخواه، بومی وردپرس هستند و در برگه ها، نوشته ها و پست تایپ های دلخواه نمایش داده می شوند. اگرچه رابط کاربری زمینه دلخواه بومی خیلی کاربر پسند نیست. بین زمینه های دلخواه بومی و زمینه های دلخواه پیشرفته تفاوت بسیاری وجود دارد.

  3. رضا

    سلام تشکر من همه روز زدم اما تصویر لینک دار نمیدونم چطوری ایجاد کنم میشه راهنمایی کنید ممنون

  4. احمد نیکفام

    سلام
    خیلی خیلی عالی بود، آقای قائم امیدی من نیاز به یک زمینه سفارشی دارم، خودم بلد نیستم بسازم، ایمیل و … نتونستم ازتون پیدا کنم، برای همین اینجا نوشتم
    دوست عزیز اگر ممکن باشه با ایمل بنده مکاتبه کنین تا من جزئیات رو براتون ارسال کنم. پیشاپیش از توجه تون ممنونم

  5. سعید

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

  6. eiman

    دوست عزیزمیتونی لطف کنید این رو تو سایت من ثبت کنید؟؟
    لطفا مطلب بنده رو تاییدنکنید وجواب رو ب ایمیلم بفرستید
    منتظرم//

  7. امید

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

  8. سامان

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

  9. حمید

    سلام
    یه سوال
    چطور میشه متن رو لینک دار کرد
    یعنی مثلا ژانر رو که ما ساختیم بشه روش کلیک کرد و مطالب اون ژانر رو پیدا کرد

  10. ارمان

    شما همینجوری یه چیزی میگی یعنی چی css اضافه کنید مگه کشکه هرجا دلمون خواست اضافه کنیم این اصلا css اجرا نمیشه خیلی هم کدش به هم ریختس تو مطالب میره

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

ماندگار وب - 1400