نحوه نوشتن کد سفارشی در پست های وردپرس

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


همه این موارد و موارد دیگر دلایل معتبری هستند ، اما مهم نیست که به دنبال دستیابی به کد دلخواه باشید ، روند نوشتن کد می تواند باعث پیچیده شدن عصب شود یا کاملاً چالش برانگیز باشد! در این آموزش موارد زیر را شرح خواهیم داد:

  • افزودن کدی که به نظر می رسد مانند کد باشد ، اما مانند کد رفتار نمی کند (به عنوان نمایشگر نشان دادن خطوط کد یا بهبود ظاهر وب سایت خود ، رفتار نکنید)
  • اضافه کردن کد که قصد دارد مانند کد رفتار کند ، به عنوان مثال تبلیغات نوشتاری مانند Google Adsense Adsense

در زیر این دو دسته ، ما کمی به کد برنامه نویسی مانند HTML ، CSS ، Javascript و لمس تبلیغات و زیبایی های آن خواهیم پرداخت.

ظرف اکنون ، بدون اینکه طرفداران بیشتری داشته باشیم ، بیایید به تجارت بپردازیم و کدی بنویسیم.

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

اگر مایل هستید کدی را به نمایش بگذارید (شاید شما یک طراح یا توسعه دهنده وب باشید) که کاربران شما می توانند کپی و چسباندن آن را انجام دهند ، مهم است که این کار را درست انجام دهید زیرا حتی یک خط یک خط هم می تواند کد را خراب کند ، از این رو تمام کارهای شما. نحوه تفسیر کد شما توسط وردپرس به این بستگی دارد که آیا از ویرایشگر HTML یا Visual Post استفاده می کنید. وارد کردن کد شما به طور مستقیم در ویرایشگر تصویری اثری را که می خواهید ایجاد کنید نخواهد داشت ، زیرا ویرایشگر بصری کد را متن عادی می داند ، به این معنی که مرورگرهای وب کد شما را به عنوان “کد” تعبیر نمی کنند ، بلکه به عنوان یک متن معمولی.

از طرف دیگر ، HTML Post Editor هرگونه نشانه گذاری HTML یا CSS را که استفاده می کنید تشخیص می دهد ، به این معنی که توسط مرورگر وب تفسیر می شود ، چیزی که ممکن است منجر به ایجاد پوسته های پوسته شده و محتوای بد بو شود. برای مثال, 

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

یک تمرین HTML

این یک تمرین بیهودگی است ، اما می توانید آن را برای تصویر واضح تر از آنچه منظور من است امتحان کنید. فقط باز کنید ویرایشگر HTML, نوع

و آن را به عنوان پیش نویس ذخیره کنید. پس از ذخیره پیش نویس خود ، بر روی “پیش نمایش پست” کلیک کنید تا ببینید وب سایت mangled. نگران نباشید ، دائمی نیست و فقط می توانید پیش نویس را حذف کنید. اکنون به تجارت بازگردید.

به طور کلی می توانید از دو روش از کد استفاده کنید. در مرحله اول ، می توانید از کد در یک خط (یا پاراگراف) استفاده کنید تا یک نکته درباره کد خود روشن شود. ثانیاً ، می توانید کد خود را بنویسید ، برجسته کنید و مانند آن قرار دهید:



نوشتن کد در آموزش پست های وردپرس


...

برای دستیابی به اثر فوق ، ما از برچسب کد نوشته شده مانند ... کد ما در اینجا وارد می شود . فلش های جایگزین (<  >) بسته به سایت وردپرس و ویرایشگر پست مورد استفاده (بسته های بصری یا HTML) با براکت های مربعی ([]) بستگی دارد. کدی که می خواهید نمایش دهید باید بین برچسب افتتاحیه باشد,   و برچسب بسته شدن, . به عنوان مثال ، برای استفاده از کد در یک پاراگراف:

کد در یک پاراگراف

برچسب کد باعث می شود متن غیر HTML مانند کد به نظر برسد ، اما به مرورگر وب نمی گوید که نشانه گذاری HTML را تفسیر کند یا آن را از پست خارج کند. این بدان معنی است که یک مرورگر هنوز می تواند نشانه گذاری HTML شما را رمزگذاری کند و نمایش ویترین را دشوار می کند برچسب های HTML در کد شما با این حال ، شما می توانید با استفاده از کاراکترهای گسترده یا شخصیتهای مشخص برای نشان دادن این مشکل بر طرف شوید < > کاراکترها ، که هر مرورگری را فریب می دهد. مثلا…

برچسب های HTML را می توان به عنوان نشانه گذاری HTML تفسیر کرد

… یک ظرف جدید ایجاد می کند (به لطف

) و عنوان (

) ، که صفحه وب شما را خراب می کند. اما اگر از اشخاص کاراکتر برای جایگزینی استفاده می کنید < > فلش ، شما از این رفتار خودداری کرده و کد مورد نظر خود را مطابق دلخواه از آن خارج خواهید کرد بنابراین کد فوق به این شکل ظاهر می شود:

به جای آن از شخصیت های شخصیت استفاده کنید

یک بلوک کد برجسته ایجاد کنید

اگر می خواهم یک کد از کد (یا حتی متن) را برجسته کنم تا چیزی شبیه به آن داشته باشم.

بلوک کد

شروع می کنم با قرار دادن کد (یا متن) در ظرف مانند:

شما باید این کار را در ویرایشگر HTML انجام دهید

سپس من با استفاده از CSS یا بطور مستقیم (مانند تصویر بالا) یا از طریق سبک اضافه می کنم سبک.css پرونده موجود در پوشه اصلی موضوع شما.

برچسب های کد خود را سبک کنید

برچسب کد از اندازه قلم استفاده می کند و متن را به صورت پیش فرض در یک فونت monospaced قرار دهید. شما می توانید تمام آنچه را تغییر دهید تا کد شما فقط به روشی که می خواهید جستجو کنید. همه شما باید اضافه کنید …

 کد {font-size: 1.2em؛ رنگ: # 000؛ font-weight: normal؛} 

… یا چیزی شبیه به شما سبک.css. سبک های نامحدودی وجود دارد و همه چیز به ترجیحات شخصی شما بستگی دارد ، بنابراین از سبک عقب نمانید.

افزودن كدی كه مانند كد رفتار می كند

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

اگر تبلیغات شما یک تصویر ساده و یک پیوند است ، می توانید از طریق ابزار بارگذاری ، آگهی را به پست خود اضافه کنید. کافیست تصویر را بارگذاری کرده و پیوند خود را وارد کنید (و شاید یک عنوان) و کار شما انجام می شود. این روش محدود است اگرچه فقط می توانید آگهی خود را در سمت چپ ، راست یا راست در مرکز قرار دهید – درست مثل یک تصویر معمولی. از طرف دیگر ، می توانید با استفاده از ویرایشگر HTML ظرفی را در پست خود ایجاد کنید.

مثال:


این ظرف را دقیقاً در جایی که می خواهید آگهی خود ایجاد کنید ، به این معنی است که قبل از افزودن تبلیغ باید پست را آماده کنید. پس از آماده شدن ظرف ، می توانید آن را به سبک دلخواه خود سبک کنید. می توانید با استفاده از style.css خود را به اطراف تغییر دهید موقعیت ویژگی. اگر می خواهید یک اجرا کنید تبلیغ Google Adsense در پست های خود ، شما هنوز هم می توانید استفاده کنید AdSense سریع – افزونه – یا یک ظرف بسازید و کد تبلیغاتی خود را مانند این قرار دهید:


یادداشت 1: تبلیغات گوگل مبتنی بر جاوا اسکریپت است و می تواند توسط همه مرورگرهای اصلی وب تفسیر شود مشروط بر اینکه کاربر Javascript را در دستگاههای خود فعال کرده باشد.

توجه 2: شما باید ابعاد تبلیغاتی مناسب را برای وب سایت خود انتخاب کنید تا از پیام رسانی و همچنین وب سایت خودداری نکنید.

اگر می خواهید بدون هیچگونه کار اضافی یک آگهی دائمی اضافه کنید که در تمام پست های شما (پست های فعلی و آینده) ظاهر می شود ، باید ویرایش کنید قالب پست تنها (single.php). من با اضافه کردن کد زیر به آگهی 468px در 60px در صدر پست های خود قرار دادم single.php سریعا بعد از < – – END post-entry-meta – ->.


البته ، شما باید از Google Ads خود استفاده کنید �� اینگونه تبلیغ Google Adsense در وبلاگ من ظاهر می شود:

نوشتن کد در وردپرس

برای پیدا کردن single.php, برو به صفحه مدیریت -> ظاهر -> ویرایشگر – >> single.php. پس از باز شدن single.php ، از نوار جستجو استفاده کنید (Ctrl + F) برای یافتن < – – END post-entry-meta – ->.

شما می توانید ظروف را به همان شکلی که هست ترک کنید یا با استفاده از style.css آن را به عنوان متناسب با آن سبک دهید. و به یاد داشته باشید که همه تغییرات را ذخیره می کنید.

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

جعبه ابزار

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

خوب ، در مورد آن است ما در ابتدا توانستیم مناطقی را که در ابتدا بیان کردیم ، پوشش دهیم. اما اگر مفهومی را در این پست نمی فهمید ، یا دوست دارید پیشنهادات یا نظرات خود را اضافه کنید ، لطفاً نظرات خود را در بخش نظرات زیر به اشتراک بگذارید!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map