نحوه نوشتن کد سفارشی در پست های وردپرس
دلایل زیادی وجود دارد که بخواهید کد اضافی را در پست های وردپرس خود بنویسید یا اضافه کنید. ممکن است لازم باشد تبلیغاتی را نشان دهید، سبک منحصر به فردی را در بخش‌های خاصی از وب‌سایت خود اعمال کنید، یا به سادگی برخی از متن یا محتوا را برای جلب توجه علامت‌گذاری کنید. با این حال، ممکن است برای دستیابی به جلوه های بصری مختلف کد اضافه کنید تا تجربه کاربری بهتری ارائه دهید.
همه اینها و موارد دیگر دلایل معتبری هستند، اما مهم نیست که با کد سفارشی به دنبال چه چیزی هستید، روند نوشتن کد می تواند اعصاب خردکن یا کاملاً چالش برانگیز باشد! در این آموزش، زمینه های زیر را پوشش خواهیم داد:
- افزودن کدی که شبیه کد است اما مانند کد عمل نمی کند (در صورتی که به دنبال نمایش خطوط کد یا بهبود ظاهر وب سایت خود هستید)
- افزودن کدی که در نظر گرفته شده است مانند کد رفتار کند. تبلیغات اسکریپت شده مانند تبلیغات Google Adsense
در این دو دسته، کمی به کدهای برنامه نویسی مانند HTML، CSS، جاوا اسکریپت و لمس تبلیغات و زیبایی کانتینر
افزودن کدی که شبیه کد است اما مانند کد عمل نمی کند
اگر می‌خواهید کدی را به نمایش بگذارید (شاید شما یک طراح یا توسعه‌دهنده وب هستید) که کاربرانتان می‌توانند آن را کپی و جای‌گذاری کنند، مهم است که این کار را به درستی انجام دهید زیرا حتی یک خط شکسته می‌تواند کد را بهم بزند، بنابراین همه موارد شما کار کردن نحوه تفسیر کد شما توسط وردپرس به این بستگی دارد که از ویرایشگر HTML یا Visual Post استفاده می کنید. وارد کردن کد خود به طور مستقیم در ویرایشگر بصری، تأثیری را که می‌خواهید ایجاد کنید، نخواهد داشت، زیرا ویرایشگر بصری کد را متنی معمولی می‌داند، به این معنی که مرورگرهای وب کد شما را به عنوان «کد» تفسیر نمی‌کنند، بلکه به عنوان متن معمولی تفسیر می‌کنند.
از طرف دیگر، ویرایشگر پست HTML هر نشانه گذاری HTML یا CSS را که استفاده می کنید تشخیص می دهد، به این معنی که آنها توسط مرورگر وب تفسیر می شوند، چیزی که ممکن است منجر به طرح بندی های بهم ریخته و محتوای بد بو شود. به عنوان مثال،
یک تمرین HTML
این واقعاً تمرینی برای بیهودگی است، اما می‌توانید آن را امتحان کنید تا تصویر واضح‌تری از منظور من داشته باشید. فقط ویرایشگر HTML خود را باز کنید،
به طور کلی، می توانید از کد به دو صورت استفاده کنید. در مرحله اول، می توانید از کد درون یک خط (یا پاراگراف) برای روشن کردن یک نکته در مورد کد خود استفاده کنید. در مرحله دوم، می توانید کد خود را بنویسید، برجسته کنید و در بلوکی مانند این قرار دهید:
<پیش>
…
برای دستیابی به اثر فوق، از تگ کد نوشته شده مانند استفاده می کنیم … کد ما در اینجا قرار می گیرد . بسته به سایت وردپرس و ویرایشگر پستی که استفاده می‌کنید (بصری یا HTML) پیکان‌های (< >) را با کروشه ( [ ] ) جایگزین کنید. کدی که می‌خواهید نمایش دهید باید بین تگ باز، و برچسب بسته شدن، قرار گیرد. به عنوان مثال، برای استفاده از کد در یک پاراگراف:
برچسب کد متن غیر HTML را شبیه کد می‌کند، اما به مرورگر وب نمی‌گوید نشانه‌گذاری HTML را تفسیر کند یا آن را از پست حذف کند. این بدان معناست که یک مرورگر همچنان می‌تواند نشانه‌گذاری HTML شما را رمزگذاری کند و نمایش برچسب‌های HTML در کد شما دشوار باشد. با این حال، می توانید با استفاده از کاراکترهای توسعه یافته یا موجودیت های کاراکتر برای نشان دادن کاراکترهای < > بر این مشکل غلبه کنید، که هر مرورگری را فریب می دهد. به عنوان مثال…
… یک ظرف جدید (به لطف
) ایجاد می کند که صفحه وب شما را خراب می کند. اما اگر از موجودیت های کاراکتری برای جایگزینی فلش های < > استفاده کنید، از این رفتار اجتناب کرده و کد خود را به دلخواه خروجی می گیرید. بنابراین، کد بالا به شکل زیر خواهد بود:
یک بلوک کد برجسته ایجاد کنید
اگر بخواهم یک بلوک از کد (یا حتی متن) را برجسته کنم تا چیزی شبیه به:
من با قرار دادن کد (یا متن) در ظرفی مانند این شروع می‌کنم:
سپس با استفاده از CSS مستقیماً (مانند تصویر بالا) یا از طریق فایل style.css که در پوشه اصلی طرح زمینه شما یافت می‌شود، سبک اضافه می‌کنم.
تگ های کد خود را سبک کنید
تگ کد از اندازه فونت
استفاده می کند و متن را به صورت پیش فرض در یک فونت تک فاصله قرار می دهد. هر چند می توانید همه اینها را تغییر دهید تا کد شما همان طور که می خواهید به نظر برسد. تنها کاری که باید انجام دهید این است که… را اضافه کنید
کد{font-size:1.2em; color:#000; font-weight:normal;}
…یا چیزی شبیه به style.css شما. سبک‌های نامحدودی وجود دارد و همه چیز به ترجیحات شخصی شما بستگی دارد، بنابراین درنگ نکنید – سبک‌های خود را تغییر دهید.
افزودن کدی که شبیه کد است
این بخش مخصوصاً برای نمایش تبلیغات یا اسکریپت های دیگر مفید است. تکه های جاوا اسکریپت در پست های شما. در حالی که افزونه هایی مانند Quick Adsense وجود دارد، به شما کمک می کند تبلیغات را در پست های خود مدیریت کنید، ممکن است علاقه مند به نصب اسکریپت های مستقلی باشید که کنترل کامل روی آنها دارید.
اگر تبلیغ شما یک تصویر ساده و یک پیوند است، می توانید آگهی را از طریق ابزار بارگذاری به پست خود اضافه کنید. فقط تصویر را آپلود کنید و لینک خود (و شاید یک عنوان) را وارد کنید و کار شما تمام شده است. اگرچه این روش محدود است زیرا شما فقط می توانید آگهی خود را در سمت چپ، راست یا در مرکز قرار دهید – درست مانند یک تصویر معمولی. از طرف دیگر، می‌توانید با استفاده از ویرایشگر HTML یک ظرف در پست خود ایجاد کنید.
مثال:
<پیش>
این محفظه را دقیقاً در جایی که تبلیغ خود را می خواهید ایجاد کنید، به این معنی که قبل از افزودن آگهی باید پست را آماده داشته باشید. پس از آماده شدن ظرف، می توانید هر طور که می خواهید به آن حالت دهید. با استفاده از ویژگی position می توانید آن را با استفاده از style.css خود جابه جا کنید. اگر می‌خواهید یک تبلیغ Google Adsense را در پست‌های خود اجرا کنید، همچنان می‌توانید از Quick Adsense – افزونه – یا یک ظرف ایجاد کنید و کد تبلیغ خود را به این صورت قرار دهید:
<پیش>
src=”//pagead2.googlesyndication.com/pagead/show_ads.js”>
توجه 1: تبلیغات Google مبتنی بر جاوا اسکریپت هستند و می توانند توسط همه مرورگرهای وب اصلی تفسیر شوند، مشروط بر اینکه کاربر جاوا اسکریپت را در دستگاه خود فعال کرده باشد.
نکته 2: شما باید ابعاد تبلیغات مناسبی را برای وب سایت خود انتخاب کنید تا از به هم ریختن پست های خود و همچنین وب سایت خود جلوگیری کنید.
اگر می خواهید یک تبلیغ دائمی اضافه کنید که در همه پست های شما (پست های فعلی و آینده) بدون هیچ کار اضافی ظاهر شود، باید الگوی پست تک ( single.php). من با افزودن کد زیر به single.php بلافاصله پس از < – – END post-entry-meta – ->، یک تبلیغ 468 پیکسل در 60 پیکسل در بالای همه پست هایم قرار دادم.< /strong>
<پیش>
src=”//pagead2.googlesyndication.com/pagead/show_ads.js”>
البته، شما باید از تبلیغات گوگل خود استفاده کنید 🙂 تبلیغ Google Adsense به این صورت در وبلاگ من ظاهر می شود:
برای یافتن single.php، به پانل مدیریت –>> ظاهر –>> ویرایشگر –>> single.php بروید. پس از باز شدن single.php، از نوار جستجو (Ctrl + F) برای پیدا کردن < – – END post-entry-meta – -> استفاده کنید.
می‌توانید ظرف را همان‌طور که هست بگذارید یا با استفاده از style.css به آن شکل دهید. و به یاد داشته باشید که همه تغییرات را ذخیره کنید. ظرف
جعبه ابزار
اگر می‌خواهید درباره نوشتن کد سفارشی در پست‌های وردپرس خود اطلاعات بیشتری کسب کنید، لطفاً منابع زیر را بررسی کنید:
خب، همین است. ما موفق شده‌ایم حوزه‌هایی را که در ابتدا مشخص کردیم، پوشش دهیم. اما اگر هیچ مفهومی را در این پست متوجه نمی‌شوید، یا می‌خواهید پیشنهادات یا نظرات خود را اضافه کنید، لطفاً نظرات خود را در بخش نظرات زیر به اشتراک بگذارید!
