ماه‌ها پیش، در یک وبلاگ دیدم که آن شخص کد خودش در سایت codepen را در بدنه‌ی پست قرار داده است، برایم جالب بود که چگونه این‌کار را انجام داده است، اما فرصت نشد تا چک کنم. امشب آن را چک کردم و در زیر نحوه‌ی انجام دادنش را که بسیار هم ساده است آموزش می‌دهم.
codepen یک ویرایشگر آنلاین است که در آن می‌توانیم کدهای html و css و javascript را وارد کنیم و خروجی را هم، همزمان مشاهده کنیم، در این لینک می‌توانید بیشتر در موردش یاد بگیرید.
مراحل انجام کار:
یک: در ابتدا اگر اکانتی در سایت codepen.io ندارید، یک اکانت بسازید، ساخت اکانت در این سایت ساده است و وقتی نمی‌گیرد.
دو: در اکانت خود یک pen جدید ایجاد کرده و کد خود را در آن نوشته و ذخیره کنید.
سه: پلاگین یا افزونه‌ی codepen embedded pens shortcode را در سایت وردپرس خود نصب و فعال کنید.
چهار: پست جدید خود را ایجاد کنید.
پنج: به سایت codepen باز گردید، از سمت راست، پایین، گزینه‌ی export را پیدا کنید و روی آن کلیک کرده و سپس embeded pen را انتخاب کنید، در پنجره‌ی جدیدی که باز می‌شود تب wordpress shortcode را انتخاب کنید و از باکس زیرِ آن کد را کپی کرده و سپس به سایت خود باز گردید و در بدنه‌ی پستی که ایجاد کرده‌اید این کد را paste کنید.
تمام شد : )
این هم نمونه ای که من انجام داده‌ام.
See the Pen PjgwEw by leila (@leilan) on CodePen.0
پی‌نوشت: اگر دوست داشتید می‌توانید از سمت راست، بالا، روی گزینه‌ی edit کلیک کنید و کدی که من نوشته‌ام را ویرایش کنید و تغییراتی که اعمال می‌کنید را مشاهده کنید. اگر می‌خواهید که مجدد تغییرات دایره قرمز رنگ را ببینید نشانگر موس را به فضایی که دایره قرار دارد ببرید، گزینه‌ی RERUN ظاهر می‌شود روی آن کلیک کنید، و از تب‌های بالای این محیط هم می‌توانید کد بخش html و css را جداگانه مشاهده کنید.
پی‌نوشتی دیگر: این هم از نتیجه‌ی بیخوابی امشب، بسی دوستش می‌دارم.
بعدا نوشت: عنوان این پست از تاریخ ۲۳ بهمن ماه، تغییر کرده است.