پرداخت
سبد خرید : 0
پشتيباني : 09389373085
تخفیف های روزانه تا 50% فقط با عضویت در کانال تلگرام سایت ! ورود به کانال x

آموزش ساخت قالب instant view برای وب سایت - قالب خبری وردپرس | تابناک وب

منتشره شده در آذر ۳, ۱۳۹۶

امروز میخواهیم به شما نحوه ساخت قالب instant view را برای وب سایتتان آموزش دهیم.

توضیحی کوتاه درباره قالب instant view :

برای اینکه لینک هایی که از وب سایت شما در کانال تلگرام و یا برای کاربران بر روی تلگرام ارسال میشوند بتوانند با حالت instant view ( و یا همان نمایش سریع ) نشان داده شوند باید قالب instant view مخصوص وب سایت خود ساخته باشید تا به محض اینکه لینکی از وب سایت خود را به اشتراک میگذارید ربات ها لینک مورد نظر شما را بررسی کرده و از اینکه آیا وب سایت شما از قابلیت نمایش سریع پششتیبانی میکند یا خیر اطمینان حاصل نمایند.

در صورتی که محتوای صفحه ای که لینک آن را به اشتراک گذاشته اید قابل نمایش در حالت سریع باشد ویژگی نمایش سریع برای پیام ارسال شده فعال خواهد شد و کاربران به راحتی و بدون انتظار برای بارگذاری محتوا در مرورگر میتوانند محتوایی را که در قالب instant view تعیین کرده اید ببینند.

چگونه قابلیت instant view را برای وب سایت خود فعال کنیم؟

برای اینکه قابلیت نمایش سریع را برای وب سایت خود فعال کنید باید حتما یک قالب instant view برای وب سایت خود ثبت کنید. و زمانی که قالب ساخته شده توسط تلگرام تایید شود میتوانید به راحتی و با اشتراک گذاشتن لینک وب سایت نمایش سریع به صورت خودکار فعال میشود. اما در صورتی که قالب instant view ساخته شده را تلگرام تایید نکرد آیا نمیتوان از این قابلیت استفاده کرد؟  برای اینکار باید توسط ویرایشگری که تلگرام در وب سایت خود تهیه کرده است برای وب سایت خود قالب درست کنید اما برای اینکه بتوانید پیام خود را با قابلیت نمایش سریع ارسال کنید لینکی را که میخواهید به اشتراک بگذارید با فرمتی خاص برای کاربران ارسال کنید تا نمایش سریع فعال شود.

در ادامه به شما خواهیم گفت که چگونه قالب instant view مخصوص وب سایت خود را بسازید.

  1.  ابتدا وارد وب سایت https://instantview.telegram.org/ شوید
  2. سپس در سمت راست صفحه منویی را مشاهده میکنید که در پایین آن گزینه login دیده میشود. بر روی گزینه login کلیک کنید.
  3. در کادری که به نمایش در آمده است شماره همراه حساب تلگرام خود را وارد نمایید و گزینه next  را بزنید
  4. بعد از ارسال شماره همراه یک پیام در تلگرام برایتان ارسال میشود که در آن مشخصات فرد درخواست کننده برای وارد شدن و ساختن قالب instant view دیده میشود. در انتهای پیام دو گزینه وجود دارد در صورتی که شما برای وارد شدن درخواست داده اید گزینه confirm و در غیر اینصورت گزینه decline را انتخاب کنید.
  5. پس از اینکه گزینه تایید را انتخاب کردید به وب سایت instant view مراجعه کرده و میبینید که نا کاربری شما در تلگرام در زیر منوی سمت راست دیده میشود. این یعنی اینکه اکنون میتوانید قالب خود را بسازید
  6. اکنون در منوی سمت راست گزینه My templates را انتخاب کنید
  7. در صفحه ای که برایتان باز میشود کادری وجود دارد که باید در آن آدرس وب سایتی را که میخواهید برای آن قالب درست کنید را وارد نمایید و سپس کلید enter صفحه کلید خود را بزنید.
  8. پس از اینکه آدرس وب سایت مورد نظر را وارد کردید به صفحه ای ارجاع داده میشوید که مانند زیر سه بخش وجود دارد

قالب instant view

در بخش سمت چپ نسخه اصلی وب سایت را مشاهده میکنید.

بخش وسط نیز ویرایشگری است که باید کد های قالب را در آن قرار دهید

بخش سمت راست نیز نمونه ای است که در حالت نمایش سریع در تلگرام به نمایش در خواهد آمد

ساخت قالب instant view :

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

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

از طرفی خود تلگرام نیز نسخه هایی را به صورت نمونه در سایت خود آماده کرده است که از آنها نیز میتوانید برای ساخت قالب instant view خود استفاده کنید

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

آموزش ساخت قالب instant view را با چهار گام اصلی به شما خواهیم گفت :

گام اول : مشخص کردن صفحاتی که نیاز به فعالسازی قابلیت instant view دارند

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

برای اینکه به ربات ها بفهمانید که کدام صفحات را برای نمایش سریع میخواهید باید در ویرایشگر خود از دستور path? استفاده کنید. به طور مثال در وب سایت شما مقالات در برگه ای به اسم blog نمایش داده میشوند مانند : http://yourdomain.com/blog در اینصورت  دستور مورد استفاده شما مانند زیر خواهد بود :

قالب instant view

گام دوم : مشخص کردن المان های ضروری برای نمایش

در این مرحله باید مشخص کنیم که محتوای قابل نمایش در چه ساختاری از صفحه قرار دارد. به طور مثال در وب سایت موج تکنولوژی محتوایی را که میخواهیم به نمایش بگذاریم در div ای با آی دی post-content قرار دارد. پس یک باید برای رباتها مشخص کنیم که محتوای div با این آی دی را به نمایش بگذارد. دستوری که در اینجا باید بگذاریم به صورت زیر خواهد بود:

قالب instant view

همانطور که در تصویر بالا مشاهده میکنید دستور main مشخص میکند که کدام ساختار حاوی محتوای مورد نظر برای نمایش میباشد.

پس از اینکه main را مشخص نمودیم باید دستور نمایش عنوان مطلب را در ویرایشگر وارد کنیم. دقت داشته باشید که عنوان مطلب باید حتما وارد شود و در صورتی که عنوان را وارد نکنید با خطا مواجه خواهید شد. علاوه بر دستور عنوان (title) دستور مربوط به بدنه ( body ) نیز باید حتما وارد شود و الزامی میباشد. در تصویر زیر نحوه وارد کردن دستور عنوان و بدنه را مشاهده میکنید:

قالب instant view

در توضیح تصویر بالا باید بگوییم که در خط دوم مشاهده میکنید که دستور title آورده شده است و در مقابل آن نیز دستور main//h2 $ مشخص میکند که تگ h2 موجود در main ( که به همان div با آی دی post-content در وب سایت موج تکنولوژی ) را باید در عنوان مطلب قرار دهد.

دستور body نیز مشخص میکند که بدنه ی قالب از محتوای کدام ساختار درون وب سایت تشکیل میشود ( که ما در اینجا همان div ای را که برای main مشخص کرده بودیم انتخاب کرده ایم ).

علاوه بر دستورات بالا تعداد زیادی دستور دیگر نیز وجود دارد و میتوانید با مراجعه به مستندات تلگرام قابلیت های دیگر را نیز اضافه نمایید.

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

گام سوم : اضافه کردن موارد بیشتر

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

قالب instant view

در تصویر بالا ما متغیری با نام side مشخص کرده ایم و محتوای داخل یک div با کلاس related-post را به آن داده ایم و میخواهیم در پایان محتواهای قابل نمایش در instant view مطالب مرتبطی را که درباره موضوع هستند به نمایش بگذاریم

خطیکه با دستور <h4> دیده میشود نیز به این اشاره میکند که محتوای div ای با کلاس related-post-header که در متغیر side است را با هدینگ ۴ به نمایش بگذارید ( یعنی تیتر : مطالب مرتبط )

دستور before@ نیز برای اضافه کردن یک hr در صفحه قبل از شروع مطالب مرتبط میباشد.

دستور <blockquote> نیز لینک های مطالب مرتبط را داخل نقل قول نمایش میدهد.

گام چهارم : حدف کردن محتواهای اضافه

در این مرحله میتوانید مواردی را که در صفحه نیازی به آن ندارید را با تابع remove@ حذف نمایید. به طور مثال ما میخواهیم در قالب instant view خود تصویر و نام نویسنده پست را که در main وجود دارد و تصاویری که مربوط به مطالب مرتبط در سایت وجود دارد در قالبمان نشان داده نشوند. برای اینکار دستور زیر را به ادامه دستورات اضافه میکنیم:

اکنون قالب ما تقریبا با آنچه که در نظر داشته ایم مطابق بوده و ساخته شده است. تنها موردی که باقی مانده این است که هنوز مطالب مرتبط نشان داده نمیشوند. دلیل آن این است که ما متغیر side را باید در ادامه به body اضافه کنیم و در صفحه نشان دهیم. برای اینکار دستور زیر را به ادامه کدها اضافه میکنیم:

قالب instant view

همانطور که در تصویر نیز مشاهده میکنید با استفاده از تابع apend_to متغیر side را به ادامه body اضافه کرده ایم و  در جدول سمت راست نیز مشاهده میشود.

اکنون قالب instant view ما آماده است و باید گزینه track changes را از سمت راست منوی بالا انتخاب نماییم.

قالب instant view

چگونه از قالب instant view در وب سایتمان استفاده کنیم؟

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

  1. قالب instant view فقط برای صفحه هایی که مورد نیاز است ساخته شود
  2. تمام محتواهای مورد نیاز برای نمایش در صفحه قابل نمایش باشند
  3. تمام عناصر و موارد اضافه حذف شده باشند.
  4. قالب ساخته شده با تمام صفحاتی که قابل نمایش هستند مطابقت داشته و به درستی کار کند.

در نظر داشته باشید که اگر موارد بالا را رعایت کنید قالبتان سریعتر توسط تلگرام تایید میشود.

اکنون نوبت به آن رسیده است که قالب خود را تست نمایید:

در صفحه ای که دستورات خود را وارد میکنید گزینه ای وجود دارد با نام view in telegram در صورتی که بر روی آن کلیک نمایید میتوانید لینک صفحه را برای دوستان خود ارسال نمایید. اما بهتر است ابتدا لینک را برای خود ارسال نمایید تا از درست کار کردن قالب خود اطمینان کنید.

اگر میخواهید لینکی از وب سایت خود را به اشتراک بگذارید و محتوایتان با حالت نمایش سریع برای کاربران نمایش داده شود باید این قسمت را با دقت بخوانید:

فرمت ارسال لینک را باید به صورت زیر رعایت کنید:

https://t.me/iv?url=your-link&rhash=your-rhash

در لینک بالا قسمت your-link باید لینک مطلبی را که میخواهید به اشتراک بگذارید را وارد کنید و در قسمت your-rhash نیز رشته ای از عدد و رقمی را که تلگرام برای هر کاربر در نظر گرفته است وارد کنید.

برای بدست آوردن rhash خود نیز میتوانید از روش زیر اقدام کنید:

زمانی که قالب خود را ویرایش میکنید و گزینه view in telegram را انتخاب کرده اید با تصویری مشابه تصویر زیر برخورد خواهید کرد:

قالب instant view

در انتهای آدرسی که بر روی صفحه مشاهده میکنید rhash مربوط به شما نیز آمده است و از این پس برای اشتراک گذاری لینک های خود در کانال و یا برای کاربران میتوانید از این رشته استفاده کنید.

دقت کنید که در صورتی که فرمت لینک ارسالی را اشتباه وارد کنید قالب instant view شناسایی نخواهد شد و کاربران نمایش سریع را در پیام شما نخواهند دید.

اما در صورتی که تلگرام قالب شما را تایید کرده باشد دیگر نیازی به این نوع لینک دهی نخواهید داشت.

به پایان این آموزش رسیدیم.

منبع:موج تکنولوژی ب



برچسب ها :
دیدگاه کاربران ۰
  • نظرات شما پس از بررسي و تاييد نمايش داده مي شود.
  • لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنيد.

css.php