امنیت وردپرس
گرویتی فرم

درج و نمایش کد در مطالب وردپرس با افزونه CodeColorer
امتیاز 5 از 1 رای

درج و نمایش کد در مطالب وردپرس با افزونه CodeColorer

CodeColorer

اگر موضوع سایت شما طوری است که باید به کاربران کدی را نمایش دهید، بسیار بهتر است که این نمایش کد به صورت حرفه ای و متفاوت با سایر قسمت های مطلب شما باشد. حتما در سایت های مختلفی دیده اید که قسمتی از مطلب که کد نمایش داده شده است، استایل متفاوتی دارد و این باعث می شود کاربر از مطلب شما تجربه بهتری کسب کند. برای درج و نمایش کد در مطالب وردپرس افزونه های زیادی هستند. یکی از آن ها افزونه CodeColorer است که کد ها را می توانید با استایل های مختلف و به صورت رنگ بندی شده نمایش دهید.

افزونه CodeColorer تا کنون بیش از 5 هزار نصب فعال داشته است و امتیاز 5 از 5 را از کاربران وردپرس دریافت کرده است.

این افزونه را می توانید به صورت رایگان از پایین همین مطلب دانلود کنید.

آموزش درج و نمایش کد در مطاب وردپرس با افزونه CodeColorer

پس از نصب و فعال سازی افزونه، گزینه CodeColorer به منو تنظیمات در پنل مدیریت وردپرس اضافه می شود.

CodeColorer menu

در صفحه تنظیمات شما علاوه بر انتخاب تم نمایش کد، تنظیمات دیگری مانند عرض نمایش کدها، حداقل طول، تعداد خطوط و … را مشخص کنید. همچنین در پایین صفحه تنظیمات بخش Preview دارد که می تواند خروجی کار را مشاهده کنید.

CodeColorer settings

حال که ظاهر نمایش کد را بر اساس سلیقه خود مشخص کردید، باید یاد بگیرید که چطور بخش از مطلب که کد است را در این قالب نمایش دهید. برای این کار باید از شورتکد های افزونه استفاده کنید.

فرمت اصلی این شورت کد ها به این صورت است:

[cc lang=”lang”]

[/cc]

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

به عنوان مثال اگر بخواهید کد PHP بنویسید، باید به صورت زیر شورت کد را درج کنید.

[cc lang=”php”]

[/cc]

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

CodeColorer result

زبان هایی که این افزونه پشتیبانی می کند، موارد زیر است:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, aimms, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, batch, bf, biblatex, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, c_winapi, caddcl, cadlisp, ceylon, cfdg, cfm, chaiscript, chapel, cil, clojure, cmake, cobol, coffeescript, cpp-qt, cpp-winapi, cpp, csharp, css, cuesheet, d, dart, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, ezt, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, ispfpanel, j, java, java5, javascript, jcl, jquery, julia, julia, kixtart, klonec, klonecpp, kotlin, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, mathematica, matlab, mercury, metapost, mirc, mk-61, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nginx, nimrod, nsis, oberon2, objc, objeck, ocaml-brief, ocaml, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, phix, php-brief, php, pic16, pike, pixelbender, pli, plsql, postgresql, postscript, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, qml, racket, rails, rbs, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, rust, sas, sass, scala, scheme, scilab, scl, sdlbasic, smalltalk, smarty, spark, sparql, sql, standardml, stonescript, swift, systemverilog, tcl, tclegg, teraterm, texgraph, text, thinbasic, tsql, twig, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vbscript, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xojo, xorg_conf, xpp, xyscript, yaml, z80, zxbasic.

امیدواریم این آموزش برای شما مفید بوده باشد. لطفا نظرات و سوالات خود را از قسمت نظرات همین مطلب برای ما ارسال کنید.

افزونه CodeColorer را می توانید از لینک زیر به صورت رایگان دانلود کنید.

ایمیل خود را وارد کنید تا لینک های دانلود به شما نمایش داده شود. اگر عضو سایت هستید، لطفا وارد حساب کاربری شوید تا دیگر این فرم ایمیل را نبینید.
درج و نمایش کد در مطالب وردپرس با افزونه CodeColorer
امتیاز 5 از 1 رای

لیسانس نرم افزار و دیپلم زبان انگلیسی دارم و بیش از 8 سال است که در زمینه طراحی سایت فعالیت می کنم. هم اکنون مدیریت تیم طراحی سایت ورتکس را بر عهده دارم و همچنین در زمینه آموزش طراحی سایت، سایت فصل وردپرس را راه اندازی کردم. در زمینه بازاریابی اینترنتی نیز مشغول مطالعه هستم.

نظرتان را با ما در میان بگذارید