تبلیغات
طراحی و بهینه سازیمشاهده


آخرین ارسال های تالار مشاهده انجمن
  • آموزش تصویری جامع نصب و تنظیمات اسکریپت NextPost 231 پاسخ 5469 بازدید
  • پیغام TrojanDownloader.JS.bchw 2 پاسخ 63 بازدید
  • گرفتن اطلاعات از کدملی 2 پاسخ 155 بازدید
  • هنگام نصب اسکریپت تراوین با دیتا بیس مشکل دارم 5 پاسخ 197 بازدید
  • مشکل در کرون جاب 1 پاسخ 11 بازدید
  • آیفون های جدید هیجان انگیز نیستند 0 پاسخ 12 بازدید
  • رفع خطا 0 پاسخ 21 بازدید
  • تراشه 7 نانومتری 0 پاسخ 23 بازدید
  • خبری جالب در مورد مایکروسافت 0 پاسخ 25 بازدید
  • چاپ یووی چیست؟ 0 پاسخ 19 بازدید
  • هاست

    افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML

    آموزش ها , مقالات,آموزش,ترفند , وردپرس

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

    برای ایجاد یک تم ایستا یا به عبارتی استاتیک با کد های اچ تی ام ال یک سری مراحل وجود دارند که عبارتند از :

     

    افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML

     

     

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

    • اضافه کردن یم حلقه به فایل index
    • اضافه کردن متاتگ ها، کد در wp-head و عنوان سایت و همچنین توضیحات فایل در سربرگ
    • اضافه کردن منوی راهنما
    • افزودن بخش های مربوط به ویجت ها،پانویس صفحه ی وبسایت و کدهای wp-footer برای فایل بخش پانویس
    • ایجاد فایل پوسته برای صفحه های ایستا
    • ایجاد یک فایل پوسته ی بایگانی (آرشیو)
    • ایجاد یک فایل پوسته ی آرشیو

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

    ویرایشگر برای انتخاب کدها و ویرایش آنها و ورود قطعه کدها
    مرورگر برای تست کار
    بارگذاری و نصب سیستم وردپرس به صورت محلی (Local) یا بر روی سرور

    تذکر! :اگر به صورت محلی کار خود را انجام می دهید، احتیاج به لوکال هاست هایی مثل MAMP ،WAMP یا LAMP دارید تا وردپرس را بر روی آن اجرا کنید. البته می تونید از XAMPP یا مثل اینها که از Mysql  و Apache پشتیبانی می کنند استفاده کنید!
    اگر بر روی هاست و در محیط پراد کار می کنید، احتیاج به دسترسی ftp برای نصب و کار با وردپرس خود دارید.

     

    تصاویر شاخص

    تصاویر شاخص یا پست هایی که دارای تصاویر بند انگشتی هستند یک ویژگی بسیار مفید برای وردپرس محسوب می شوند، که از نسخه ی اولیه آن یعنی ۲.۹ ایجاد شده اند.
    یک تصویر شاخص یا یک پست بند انگشتی یک تصویر یکتای ضمیمه شده می باشد که در هنگام کار تصاویر شاخص را با متاباکس بر روی صفحه ی نمایش شما ایجاد و ویرایش خواهد کرد.زمانی که با تصاویر شاخص در کدهای اصلی سایت خود کار می کنید، می توانید از این موارد استفاده نمایید.(به عنوان مثال ، زمانی که قابلیت پشتیبانی به تم افزوده میشود.) یا تصویر بند انگشتی (زمانی که فایل های قالب نمایش داده می شود) به عنوان یک تصویر شاخص مرد استفاده قرار می گیرد. هرچند که در این مورد کاملاً یکسان عمل می شود!

    اصطلاح بند انگشتی در واقع برای اندازه ی تصاویر به کار می رود.در این روش، شما می توانید هر تصویری را به اندازه ی دلخواه خود و از پیش تعیین شده در وردپرس خود آپلود نمایید.البته این مورد فقط درباره ی تصاویری به کار می رود که برجسته تر هستند و دارای اهمیت بیشتری نسبت به بقیه هستند.بنابراین می توانید در یک نوشته از تصاویر بند انگشتی در سایز های متوسط، بزرگ یا بسیار بزرگ استفاده نمایید.
    حالا باید بریم سراغ بخش افزودن کدها و ایجاد این امکان! اگه این بخش ها رو به درستی و دقت بالا وارد کنید به راحتی می تونین به این امکان دست پیدا کنید، پس لطفاً دقت کنید!

     

    ۱- افزودن ویژگی پشتیبانی از تصاویر شاخص
    در مرحله ی اول فایل پشتیبانی از تصاویر شاخص را به پئسته ی خود اضافه نمایید، بدون این امر شما نمی توانید به تصاویر شاخص متاباکس در ویرایش صفحه ی مدنظر خود دسترسی داشته باشید.برای این منظور قالب خود را باز نموده و با توجه به کدهایی که برای شما آورده ایم اقدام به وارد کردن آنها کنید. کدها را قبل از تگ <? در پی اچ پی قرار دهید:

    حال فایل توابع خود را ذخیره نمایید و سپس از قسمت نوشته ها بر روی ایجاد نوشته ی جدید کلیک کنید تا اولین پست خود را بعد از این ویرایش مشاهده کنید؛مطابق تصویر زیر :

    افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML

    حالا می توانید تمامی پست هایی که در وبلاگ شما وجود دارد را مشاهده نمایید؛ بی شک این ویژگی افزوده شده است و احتیاجی نیست که اندازه های خاصی را به تصاویر خود اختصاص دهید  چرا که به صورت خودکار انجام میشود.

    ۲- افزودن تصاویر شاخص به قالب آرشیو
    در مرحله ی بعدی باید مدی را به صفحه ی آرشیو اضافه کنیم تا تصاویر شاخص را نمایش دهد. این کد باید داخل حلقه صورت گیرد!
    برای این کار فایل archive.php را باز کرده و خط زیر را در آن پیدا کنید:

    و سپس قطعه کد زیر را جایگزین نمایید:

     

    این قطعه کد چندین کاربرد دارد :

    الف) این کد بررسی می کند که آیا  تصویر شاخص کد (()if ( has_post_thumbnail به کار برده می شود یا خیر!اگر وجود نداشت، تصاویر شاخص نشان داده نمیشود.
    ب)پیوند یکتای پست برای تصاویر شاخص بسته نباشد تا بازدیدکنندگان با کلیک کردن بر روی تصویر بتوانند تصاویر را بزرگتر و واضح تر مشاهده نمایند.
    ج)در نمایش تصاویر شاخص از کد ()the_post_thumbnail استفاده می شود.این کد دارای پارامتر ‘medium’ می باشد که به وردپرس می گوید اندازه ی تصویر را بصورت متوسط نمایش بده!
    این کد مجموعه ای از آرایه ها می باشد که شامل یک کلاس برای ظاهر و تنظیم ویژگی هایی برای یک تصویر است.

    حال فایل آرشیو خود را ذخیره نمایید و از صفحه ی آرشیو خود بازدید نمایید.

    اما هنوز احتیاج به یک سری تغییرات برای ظاهر کار و همچنین بزرگنمایی دارید، پس فایل style.css را باز کنید و دستورات زیر را وارد کنید:

     

    توجه کنید که با استفاده از کلاس های archive. و blog. می توانید تگ <body> در صفحه ی اصلی وبلاگ و هر صفحه ای از آرشیو خود را هدف قرار دهید! حال نوشته ها باید بسیار واضح باشند.

    ۳- افزودن تصاویر شاخص به فایل index:
    در حال حاضر شما یک پوسته ی آرشیوی با تصاویر شاخص پشتیبانی شده دارید که می توانید با آن کار کنید. قبل از اینکه این مطلب را به پایان ببرم باید بگویم شما احتیاج به وارد کردن کدهای مشابهی از فایل آرشیو به index دارید.
    بنابراین کدهای مشابه را می توانید از فایل archive.php پیدا کرده و در فایل index.php وارد کنید، سپس فایل خود را ذخیره کنید و دوباره صفحه ی اصلی وبلاگ خود را چک کنید!می بینید که تصاویر شاخص برای همه ی پست های شما قرار داده شده است.


    The product includes software licensed under GNU General Public License (GPL) or GNU

    دانلود
    .

    خرید هاست وردپرس با SSL رایگان


    مطلب مفیدی بود ؟
    نویسنده : admin 2 آموزش ها , مقالات,آموزش,ترفند , وردپرس

    لینک کوتاه مطلب : https://www.20script.ir/?p=4848

    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    1,565افزایش سرعت وردپرس به وسیله Cookie Free Domain تاریخ : 2017/12/16
    5,606افزونه صفحه ساز گرافیکی لایو کامپوسر Live Composer v1.1 تاریخ : 2015/01/10
    652نمایش پیام دلخواه در پیشخوان وردپرس برای کاربران تاریخ : 2018/05/16
    960انتقال فایل های وردپرس از زیر دامنه به دامنه اصلی تاریخ : 2018/07/14
    3,478ایجاد فرم های متنوع در وردپرس با Contact Form by Supsystic تاریخ : 2017/04/17
    694ویرایش زنده مطالب منتشر شده در وردپرس با افزونه Revisionize تاریخ : 2018/02/24
    1,312ایجاد باکس محتوا در وردپرس با افزونه Service box تاریخ : 2017/11/27
    10,661آموزش استفاده از Child Theme و کاربرد آن در وردپرس تاریخ : 2016/07/2
    2,607نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 2016/04/13
    2,341کد نمایش تبلیغات در بین متن در ادامه مطالب وردپرس تاریخ : 2017/01/16
    1,564حل مشکل فضای خالی بالای سایت وردپرس تاریخ : 2018/05/31
    1,952دور زدن تحریم نقشه گوگل در دامنه IR تاریخ : 2018/06/14
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب