نمایش کد در وردپرس بدون نیاز به نصب افزونه

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

همان‌طور که می‌دانید در ادیتور یا همان ویرایشگر وردپرس در زبانه‌ی متن این قابلیت بصورت پیش‌فرض در این سیستم مدیریت محتوی قرار داده شده است که کاربران می‌توانند با زدن دکمه‌ی code دستور و یا کد مورد نظر خود را برای نمایش، درون محتوا قرار دهند اما بزرگترین مشکل استفاده از حالت پیش فرض نمایش کد در وردپرس که ناشی از عدم استایل دهی به خروجی این قابلیت توسط طراحان در بیشتر پوسته‌های وردپرس هست این مسئله است که کدها و دستورات بر خلاف انتظار و خواسته‌ی کاربران بدون هیچ تفاوتی با متن نوشته به نمایش در می‌آیند که برای رفع این مشکل و نمایش صحیح کد در وردپرس تاکنون افزونه‌های بسیار زیادی هم‌چون SyntaxHighlighter در این رابطه توسط توسعه دهندگان وردپرس طراحی گردیده است.
در این نوشته از وبلاگ ماندگار وب بنابر درخواست تعدادی از کاربران آموزشی را آماده ساخته‌ایم که به کمک آن و بدون نصب هیچ افزونه‌ای می‌توانید کدها و دستورات مورد نظر خود را  با استفاده از ویرایشگر وردپرس بصورت متفاوت و مجزاء از متن‌های نوشته برای کاربران خود به نمایش در بیاورید. پیش از هر چیز پیشنهاد ما به شما این است در صورتی که نیاز شما به این امکان بصورت تخصصی می‌باشد و تمایل دارید مانُور بیشتری بر روی این قابلیت داشته باشید از افزونه‌های قدرتمندی که برای نمایش کد در وردپرس آماده گردیده اند همانند افزونه SyntaxHighlighter استفاده نمایید و در صورتی که تمایل به نصب افزونه و بالابردن حجم خروجی صفحه ندارید در این نوشته از وبلاگ هاستینگ ماندگار وب همراه ما باشید.
برای نمایش کد در وردپرس ابتدا فایل شیوه‌نامه (style.css) پوسته وردپرس خود را برای ویرایش باز کرده و خط‌های زیر را به آخر این فایل اضافه کنید. در استایل زیر سعی شده است نسبت به نمایش صحیح کدها در بیشتر پوسته‌ها مقادیر بصورت استاندارد تعریف شود و در صورت عدم نمایش صحیح می‌توانید نسبت به ثابت کردن نحوه‌ی نمایش در مقادیر زیر تغییرات ایجاد کنید:

code, pre {
direction:ltr;
width: 90%;
display: block;
color: #333333;
overflow:auto;
background: #fcfcfc url(img/pre_code.png) left top repeat-y;
border: 1px solid #f2f2f2;
padding: 10px 28px;
margin: 10px 0px;
max-height: 200px;
line-height: 120%;
}

توجه: این تصویر باید در پوشه تصاویر پوسته آپلود شود، که در استایل نام پوشه تصاویر img می‌باشد.

پس از انجام اینکار و ذخیره‌ی تغییرات، کدهای قرار داده شده در نوشته‌ها و برگه‎های وردپرس بصورت استاندارد و در حالتی متفاوت از محتوای متنی نوشته به نمایش در خواهد آمد، امیدوار هستیم این آموزش ساده مورد پسند شما دوستان قرار گرفته باشد.


کانال تلگرام ماندگار وب

  1. رحیم افشاری

    با درود .

    آقا من قصد دارم مطالبم برای کاربران خاص نمایش داده بشه
    مثلاً
    خبر شماره یک برای کاربران گروه شماره یک قابل مشاهده باشه و نه همه کاربران
    خبر شماره دو برای کاربران گروه شماره دو ..
    و ….

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

    1. امیر خلجی مهر

      سلام
      از طریق نقش کاربر میشه این رو به کمک افزونه هایی که وجود دارند حل کرد
      تو انجمن مطرح کنید تا دوستان بررسی کنند
      موفق باشید

  2. مهدی

    سلام
    من یه قالب ورد پرس خریدم از بیگ تم .. این لینکشه:
    *******
    اولش که میخواستم نصب کنم از دسترسی پوشه wp-content ایراد گرفت که 777 کردمش درست شد. وقتی قالب نصب شد موقع نصب افزونه ها بدون پیام خطای خاصی از نصب اونا صرف نظر میکرد.
    به پشتیبان قالب گفتم 5 روز بعد گفت مشکل از هاستته ، رفتم یه سرور مجازی گرفتم کلا اما بازم نتونست حلش کنه و دعوا راه انداخت و رفت..
    شما میدونید مشکل کجاست؟ قالب چند جای دیگه نصب شده و ایراد نداشته…
    اگر امکان داره کمکم کنید. مرسی
    ایمیل من:
    mehdidrm@gmail.com

    1. امیر خلجی مهر

      بزرگترین اشتباه شما خرید پوسته ای بوده که بصورت غیرقانونی فروخته میشده متاسفانه در این رابطه هیچ کمکی از دست ما بر نمیاید
      موفق باشید

  3. رضا

    سلام من کد را قرار دادم هیچ تغییر خواصی انجام نداد.

    1. امیر خلجی مهر

      درود
      بعد از ذخیره ی تغییرات زمانیکه از ادیتور متنی کدها بین برچسب code قرار بگیرند عملکردش رو خواهید دید.

  4. مهدی

    سلام ، همچین کدی برای وبلاگ وجود نداره؟؟؟!
    گناه ما چیه وردپرس نداریم؟ :دی
    منتظر پاسختون هستم ، سپاس

    1. امیر خلجی مهر

      درود مهدی جان
      خب کوچ کنید به وردپرس 🙂
      تجربه‌ای در این زمینه ندارم دوست من

  5. آرا

    با سلام و عرض تشکر بخاطر آموزش های مفیدتون
    ببخشید خودتون از چه افزونه ای برای درج کد در بین این پست استفاده کرده اید؟
    تشکر

    1. امیر خلجی مهر

      درود
      بفرمایید:
      wordpress.org/plugins/syntaxhighlighter

  6. وحید الوندی

    ممنون آموزش کاربردی و جالبی بود

  7. وحید الوندی

    ممنون آموزش کاربردی و جالبی بود ، بعد برای استفاده از این مورد فقط کافیه کد css را در style.css وارد کنیم

  8. sajadbaqeri

    از به دوستان و اساتيد محترم يه سوالي داشتم و احتياج به راهنمايي شما عزيزان من خيلي با وردپرس اشنا نيستم ولي تو همين چند ماهه تقريبا زير بناي اصليش رو متوجه شد و سوالم اين هست كه

    من يه سايتي دارم كه چند تا صفحه داره مثلا سرويس و نگهداري موتورخانه حالا من ميخوام يه سري مطالب مخصوص اين سر فصل بنويسم و تو اين صفحه فقط نمايش داده بشه اما نميتونم اين كار رو بكنم و هرچي مينويسم مياد صفحه اول

    اگر ممكنه راهنمايي كنيد

    1. امیر خلجی مهر

      درود
      اگر نوشته‌های شما گسترده و دارای بخش‌های گوناگونی نیستند، پیشنهاد می‌شود به‌جای نوشته از برگه استفاده نمایید. پیشخوان > برگه‌ها > افزودن برگه

  9. sajadbaqeri

    راستي يه سوال ديگه چطوري اواتار ورد پرسم رو راه اندازي كنم ؟

    1. امیر خلجی مهر

      آواتار در وردپرس نیازی به راه‌اندازی ندارد
      آواتار برای ایمیل است، به این معنی که دارنده‌ی ایمیل، خود باید نسبت به قرار دادن تصویری به عنوان آواتار اقدام کند.

دیدگاه خود را بنویسید

تنها دیدگاه‌هایی که به فارسی نوشته می‌شوند پذیرفته خواهند شد!

ماندگار وب - 1395
فروش - خرید هاست وردپرس فارسی