دلایل بسیار زیادی برای نوشتن کد در پست های وردپرسی وجود دارد . ممکن است بخواهید تبلیغاتی را در پست های خود به نمایش بگذارید، استایل یا سبک خاصی را به بخشی از سایت اعمال نمایید یا اینکه بخشی از متن یا محتوا را نشان دار کنید تا بتوانید توجه افراد را به آن بخش جلب نمایید. برای رسیدن به جلوه های بصری متعدد و بهبود تجربه کاربری می توانید از کدها استفاده کنید. همه این ها دلایل منطقی هستند اما اصلا مهم نیست از نوشتن کدهای سفارشی چه منظور و هدفی دارید، این فرآیند نباید چالش برانگیز باشد. در این مقاله قصد داریم موارد زیر را با هم مرور کنیم:
- اضافه کردن کدهایی که شبیه کد هستند اما همانند کد عمل نمی کنند.
- اضافه کردن کدهایی که همانند کد عمل می کنند همچون تبلیغات
همراه وب ایده باشید تا این موارد را با هم مرور کنیم.
اضافه کردن کدهایی که شبیه کد هستند اما همانند کد عمل نمی کنند:
اگر دوست دارید کدی را در سایت نشان دهید که کاربر بتواند آن را کپی و پیست نماید، باید اینکار را به درستی انجام دهید زیرا حتی یک خط ساده می تواند کد را به هم بریزد و کل کارتان را خراب نماید. نحوه تفسیر کد توسط وردپرس به نحوه کاربرد HTML یا ویرایشگر بصری متن بستگی دارد. وارد کردن کد به طور مستقیم در ویرایشگر متن نمی تواند آن اثری که شما به دنبالش هستید را ایجاد کند زیرا ویرایشگر بصری کدها را به عنوان یک متن معمولی در نظر می گیرد. این موضوع بدین معنی است که مرورگر این کد را به عنوان یک متن معمولی تفسیر می کند و آن را به صورت کد نمی شناسد. از سوی دیگر ویرایشگرهای HTTML، هرگونه نشانگر CSS یا HTML ای را شناسایی می کنند و می توان از آن برای ایجاد کد استفاده کرد. به عنوان مثال <div> در ویرایشگر بصری به عنوان یک متن معمولی در نظر گرفته می شود و به همین صورت نشان داده خواهد شد اما همین کد در ویرایشگر HTML به عنوان نشانگر HTML تفسیر می گردد.
تمرینات مرتبط با HTML:
خوب برای اینکه بتوانید کدهای مدنظر خود را بنویسید، ویرایشگر HTML را باز کنید و عبارت <div> را در آن وارد نمایید و به عنوان پیش نویس ذخیره نمایید. بعد از اینکه پیش نویس ذخیره شد، بر روی بخش پیش نمایش پست کلیک کنید تا وب سایت خود را مشاهده نمایید. نگران نباشید. این کد دائمی نیست و می توانید بعدا آن را دور بریزید. شما می توانید به دو روش از کدها استفاده کنید. در ابتدا می توانید از کدها در داخل خط یا پاراگراف استفاده نمایید. ثانیا می توانید کد را بنویسید، آن را هایلایت کنید و در داخل بلوکی مثل بلوک زیر قرار دهید:
<html> <head> <title>Writing Code in WordPress Posts Tutorial</title> <link rel="stylesheet" type="text/css" href="somefile.css"/> </head> <body>...</body> </html>
برای اینکه بتوانید به افکت بالا دست پیدا کنید از تگ <code> …our code goes in here </code> استفاده می کنیم. به جای (< >) می توانید بسته به نوع سایت وردپرسی و پستی که ویرایش می کنید از براکت استفاده نمایید. کدی که می خواهید نشان دهید باید بین تگ های باز<code> و تگ بسته </code> قرار گیرد. . تگ کد متن های غیر HTML را همانند کد نشان می دهد اما به مرورگر نمی گوید که آن را به عنوان نشانگر HTML تفسیر نماید.
ایجاد بلوک هایلایت شده کد:
شما می توانید کدهای خود را برجسته کنید تا به چیزی شبیه کد زیر دست یابید:
سعی می کنیم در این شرایط کد را در کانتینری شبیه کانتینر زیر قرار دهیم:
سپس می توان استایل یا سبک کد را به کمک CSS یا از طریق فایل Style.css موجود در فولدر اصلی قالب تغییر دهیم.
استایل بخشیدن به تگ کد:
تگ کد از اندازه فونت موجود در <body> استفاده می کند و متن را به صورت فونت پیش فرض به نمایش می گذارد. شما می توانید شکل کدها و نحوه نمایش آن ها را تغییر دهید. تنها کاری که باید انجام دهید اضافه کردن کدهای زیر است:
code{font-size:1.2em; color:#000; font-weight:normal;}
اضافه کردن کدهایی که شبیه کد عمل می کنند:
اگر می خواهید تبلیغ یا اسکریپتی را در پست های خود به نمایش بگذارید این بخش برایتان مفید خواهد بود. با اینکه افزونه های متعددی به مدیریت تبلیغات کمک می کنند اما می توانید از کدهای سفارشی نیز برای اینکار بهره ببرید. اگر تبلیغ شما یک تصویر و لینک ساده است می توانید تبلیغ را به پست خود از طریق قابلیت آپلود اضافه کنید. کافیست تصویر را آپلود کنید و لینک آن را در بخش مدنظر قرار دهید و کار را تمام نمایید. این روش بسیار محدود است زیرا تنها می توانید تبلیغ را در سمت چپ، راست یا مرکز تراز نمایید. شما می توانید یک کانتینر در داخل پست ایجاد کنید. برای اینکار باید از ویرایشگر HTML بهره ببرید. به مثال زیر توجه کنید:
<div id="ad1"> <a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/> </a> </div>
قبل از اینکه بخواهید تبلیغ را اضافه کنید باید پست تان آماده باشد. بعد از اینکه کانتینر را ایجاد کردید، می توانید آن را هر گونه که دوست داشتید تغییر دهید. به کمک خاصیت Position می توانید موقعیتش را تغییر دهید. اگر دوست دارید تبلیغات گوگل ادسنس را اجرا کنید می توانید از کدی شبیه کد زیر استفاده نمایید:
<div id="ad1"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-1289628145978703"; /* vistamediainc1 */ google_ad_slot = "7102844977"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>
اگر می خواهید تبلیغ دائمی اضافه کنید که در کل پست های فعلی و بعدی بدون کار اضافی نشان داده شود باید فایل single.php را ویرایش کنید. به عنوان مثال تبلیغ 468 در 60 پیکسل در بالای همه پست ها نشان داده می شود. با اضافه کردن کد زیر به فایل single.php بعد از < – – END post-entry-meta – -> می توان به چنین هدفی دست پیدا کرد:
<div id="ad1"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-1289628145978703"; /* vistamediainc1 */ google_ad_slot = "7102844977"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>
در این شرایط باید تبلیغ گوگل ادسنس خود را وارد نمایید.
استفاده از تگ <pre>:
برای اینکه کد شما شبیه یک جعبه جداگانه باشد می توان از تگ <pre> استفاده کرد. این تگ به مرورگر دستور می دهد از فونتی با ظاهر مشابه استفاده کند اما دقیقا همان چیزی که داخل تگ است را تولید نماید. هر فضا یا شکننده خطی دقیقا تولید می شود.
<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships" href="goodtalk.php">good relationship</a> between you and me....
استفاده از این تگ ظاهر زیبایی به پست های شما نمی دهد اما می توان از آن استفاده کرد.
سبک بخشیدن و استایل تگ کد:
به طور پیش فرض استفاده از تگ های <code>, <tt> و <pre> متن را به فونت monospaced نشان می دهد از اندازه فونت موجود در تگ <body> استفاده می کند.
برای اینکه کدهای شما ظاهر متفاوتی داشته باشد باید به آن ها استایل بدهید. شما می توانید این استایل ها را به فایل Style.css خود در قالب وردپرس اضافه کنید. می توانید از استایل های زیر استفاده نمایید.
pre, code{ direction: ltr; text-align: left;}pre {border: solid 1px blue; font-size: 1.3 em; color: blue; margin: 10px; padding:10px; background: #FFFFB3}code {font-size:1.2em; color: #008099}
ممنون خیلی خوب بود
خیلی ممنونم مفید بود. اما یه سوال دارم. من قالب وردپرس دارم که توش میتونم کد اچ تی ام ال بذارم چطور میتونم یه صفحه اچ تی ام ال طراحی کنم که چندتا بلوک تصویر داشته باشه مثلا 3 تا بلوک عکس داشته باشم
قالب های جدید وردپرس امکانات زیادی برای بلوک بندی و غیره بدون کدنویسی و بصورت درگ اند دراپ دارن
قالب آوادا پیشنهاد میشه