Share
WordPress bevat twee ingebouwde editors waarmee u themabestanden direct vanuit de browser kunt bewerken, dit zijn de Thema-editor en de Plugin-editor. Standaard ziet de editor er heel eenvoudig en moeilijk uit, omdat de kleuren volledig zwart en grijs zijn. In deze zelfstudie laat ik u zien hoe u CodeMirror.js kunt integreren in de editors om de look mooier te maken. Onze codefragmenten worden gemarkeerd met meer kleuren, de editors hebben zelfs regelnummers en meer.
Allereerst moet u de CodeMirror-bibliotheek downloaden. Het is een krachtige bibliotheek en ondersteunt vele programmeertalen en functies. Na het downloaden en uitpakken, laten we deze directory in de directory van je thema plaatsen (ik gebruik Twenty Eleven als een demo) en noem het CodeMirror.
Vervolgens maken we een bestand met de naam codemirror.php in deze map en neem dit bestand op in de functions.php bestand van uw thema.
Accentsconagua
// functions.php include ("codemirror / codemirror.php"); Open onze codemirror.php en ga naar de volgende stap.
"CodeMirror is een JavaScript-component die een code-editor in de browser biedt.Wanneer een modus beschikbaar is voor de taal waarin u codeert, kleurt deze uw code en helpt u optioneel met inspringen."
add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); function codemirrorirror_register () wp_register_script ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.js"); wp_register_style ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.css"); wp_register_style ('cm_blackboard', get_template_directory_uri (). "/ codemirror / theme / blackboard.css"); wp_register_script ('cm_xml', get_template_directory_uri (). "/ codemirror / xml / xml.js"); wp_register_script ('cm_javascript', get_template_directory_uri (). "/ codemirror / javascript / javascript.js"); wp_register_script ('cm_css', get_template_directory_uri (). "/ codemirror / css / css.js"); wp_register_script ('cm_php', get_template_directory_uri (). "/ codemirror / php / php.js"); wp_register_script ('cm_clike', get_template_directory_uri (). "/ codemirror / clike / clike.js"); add_action ('admin_enqueue_scripts', 'codemirror_enqueue_scripts'); add_action ('admin_head', 'codemirror_control_js'); De bovenstaande fragmenten haken het codemirror_register functioneer in twee haken, load-theme-editor.php en load-plugin-editor.php. Het betekent dat wanneer de Thema-editor of Plug-in Editor wordt aangevraagd, zij onze zullen bellen codemirror_register functie.
Binnen deze functie registreren we alle benodigde script- en stijlbestanden. codemirror.js en codemirror.css zijn twee hoofdcomponenten van de CodeMirror-bibliotheek, ze bevinden zich in de lib directory.
blackboard.css is een themabestand, de thema map in de bibliotheek CodeMirror heeft ook veel andere themabestanden, die u kunt wijzigen afhankelijk van uw voorkeuren. Er zijn meer beschikbare thema's, zie ze hier:
modes zijn JavaScript-programma's die helpen bij het kleuren (en eventueel inspringen) van tekst die in een bepaalde taal is geschreven. Hun waarde is een MIME-type waarde, deze is afhankelijk van de taal waarmee we werken. Je kunt alle modi zien in de mode map binnen de CodeMirrorbibliotheek. Omdat de ingebouwde editor van WordPress HTML, PHP, CSS (meer hier) kan bewerken, dus ik registreer scripts scripts op de volgende regels van codemirror_register functie. De reden waarom ik XML- en Clike-scripts heb geregistreerd, wordt later uitgelegd.
Nadat we alle scriptbestanden hebben geregistreerd, moeten we ze in de wachtrij plaatsen telkens wanneer ons beheerdersgedeelte wordt geladen. Dus ik voeg het toe codemirror_enqueue_scripts functie naar de admin_enqueue_scripts haak. Dan voegen we ook een controle javascript-bestand (we kunnen het options-script wijzigen, toevoegen of verwijderen) van CodeMirror toe aan de admin-head.
function codemirror_enqueue_scripts () wp_enqueue_script ('codemirror'); wp_enqueue_style (CodeMirror); wp_enqueue_style (cm_blackboard); wp_enqueue_script (cm_xml); wp_enqueue_script (cm_javascript); wp_enqueue_script (cm_css); wp_enqueue_script (cm_php); wp_enqueue_script (cm_clike); De bovenstaande functie heeft geen groot probleem om uit te leggen, het zorgt ervoor dat alle scripts die we eerder hebben geregistreerd in het rijtje komen. Open de Thema-editor en bekijk de bron en u zult zien dat deze scripts in de koptekst zijn ingesloten.
Kort gezegd is ons script:
function codemirrorirror_enqueue_scripts () ?>Deze functie wordt ingesloten in de admin-headsectie, CodeMirror zal elk element dat de
nieuwe inhoudID, omdat onzetextareaelement dat onze codefragmenten bevat, heeft deze ID.
Wanneer CodeMirror zonder opties wordt gebruikt, gebruikt CodeMirror zijn eigen standaardopties. Voor meer gebruik van meer opties, kunnen we dit als volgt doen:
function codemirrorirror_enqueue_scripts () ?>Die extra opties zorgen ervoor dat onze editor regelnummers en het schoolbord-thema heeft. Kennisgeving in de
modeoptie, deze optie bepaalt wat mode CodeMirror zou moeten gebruiken (in stap 2 hebben we wat genoemd mode is). Omdat elk bestandstype zijn eigen modus heeft, moeten we deze optie definiëren om CodeMirror goed te laten werken en nauwkeuriger weer te geven. Hieronder staan enkele waarden van het MIME-type:
"Text / javascript" voor JavaScript-modus"Text / css" voor CSS-modus"Application / x-httpd-php" voor de PHP-modus vereist deze modus de modi XML, JavasScript, CSS en C-Like. Dat is de reden dat we bovenstaande XML- en C-Like-scripts moeten registreren.Eenvoudige HTML / PHP-modus op basis van de C-achtige modus. Afhankelijk van PHP-, XML-, JavaScript-, CSS- en C-achtige modi. (kijk hier)
Voor het beste gebruik, moeten we definiëren welk bestandstype we aan het bewerken zijn om de juiste modus te gebruiken. Ons doel is om het script automatisch de juiste modus te laten gebruiken. Hier is een oplossing:
function codemirror_control_js () if (isset ($ _ GET ['file'])) // $ _GET ['file'] bevat het pad van het bestand dat we bewerken $ filename_to_edit = end (explode ("/", $ _GET ['file '])); // We moeten de bestandsnaam $ file = substr krijgen ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Haal de schakelaar voor de bestandsextensie ($ bestand) // En wijs de waarde van het juiste MIME-type toe aan $ file variable case "php": $ file = "application / x-httpd-php"; breken; case "js": $ file = "text / javascript"; breken; case "css": $ file = "text / css"; breken; else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (explode ('/', $ file_script)); if ($ file_script == 'theme-editor.php') $ file = "text / css"; else $ file = "application / x-httpd-php"; ?> Elke keer dat we op een bestand klikken om het te bewerken, de $ _GET [ 'file] variabele zal het pad naar dat bestand bevatten. Bijvoorbeeld:
En deze codefragmenten helpen ons bij het definiëren van bestandsextensies die we aan het bewerken zijn:
$ filename_to_edit = end (explode ("/", $ _GET ['file'])); // We moeten de bestandsnaam $ file = substr krijgen ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Krijg bestandsextensie Afhankelijk van elke extensie, wijzen we een andere MIME-typewaarde toe voor die overeenkomst.
Met uitzondering van de eerste keer dat we de Theme- of Plugin-editor openen, klikken we niet op een bestand om het te bewerken, dus de $ _GET [ 'bestand'] variabele bestaat niet. WordPress opent een standaardbestand om automatisch te bewerken. Voor de Thema-editor is het standaardbestand de style.css bestand en een ander PHP-bestand in de Plugin-editor. Dus we moeten de waarde van het MIME-type definiëren als "Text / css" in de Thema-editor en "Application / x-httpd-php" in de plug-in-editor.
Alles is klaar, maar de editor ziet er rommelig uit. We moeten het CSS-bestand een beetje aanpassen. In de lib directory openen we de codemirror.css bestand, zoek onder code snippets:
.CodeMirror-scroll overflow-x: auto; overflow-y: verborgen; hoogte: 300 px; / * Dit is nodig om een IE [67] -bug te voorkomen waarbij de gescrollde inhoud zichtbaar is buiten het schuifvak. * / positie: relatief; overzicht: geen;
Vervangen door:
.CodeMirror, .CodeMirror div margin-right: 0! Important; .CodeMirror-scroll overflow-x: auto; overflow-y: verborgen; hoogte: 450 px; / * Dit is nodig om een IE [67] -bug te voorkomen waarbij de gescrollde inhoud zichtbaar is buiten het schuifvak. * / positie: relatief; overzicht: geen;
CodeMirror heeft veel functies, het is een echt krachtige javascript-bibliotheek. Lees de handleiding van CodeMirror voor volledige informatie over de beschikbare functies. U kunt de andere functies achterhalen of deze aanpassen en zelf toevoegen aan uw WordPress-code. Het is vrij eenvoudig: registreren, enqueue en aansluiten het script, zoals de manier die ik hierboven heb gedaan.
In deze zelfstudie concentreer ik me niet te veel op CodeMirror en de bijbehorende functies, ik demonstreer gewoon de manier om het in de WordPress-editor te integreren zodat onze Editor er mooier uitziet of gemakkelijk mee te werken is. Ik hoop dat deze tutorial nuttig was voor iedereen.
Als je denkt dat mijn tutorial een probleem heeft, of je hebt betere ideeën, of iets toe te voegen, laat dan hieronder je reacties achter! We zouden het zeer op prijs stellen.
