O WordPress contém dois editores embutidos que lhe permitem editar os ficheiros dos templates diretamente a partir do seu painel de administração, sendo eles o editor de templates e o editor de plugins. Por defeito, estes editores têm um aspeto e funcionalidades bastante simples e reduzidas, o que por si só torna o trabalho de edição um pouco mais complicado, começando logo pela falta de diferenciação de código, não havendo diferentes cores no mesmo. Neste artigo vamos-lhe mostrar como introduzir a biblioteca CodeMirror nos editores para melhorar não só o seu look como também a sua usabilidade enquanto editores de código. CodeMirror é um componente JavaScript que fornece um editor de código para o navegador. Quando um determinado tipo de código que está a trabalhar está disponível, o código irá ser colorido facilitando assim a identificação dos diferentes elementos presentes no mesmo e poderá contar ainda com numeração de linhas.
1. DOWNLOAD E PREPARAÇÃO
O primeiro passo é obter a biblioteca que vai permitir a alteração e utilização do editor Codemirror dentro do painel de administração WordPress. Faça download da última versão do Codemirror aqui. Codemirror tem suporte para várias linguagens, e depois de baixar os arquivos, descompacte-os e envie-os para o diretório do seu template WordPress, criando uma nova pasta dentro da pasta do template. Neste caso utilizámos o nome codemirror, mas você poderá utilizar aquela que quiser:
2. CODEMIRROR.PHP
Neste passo iremos criar um ficheiro denominado codemirror.php e introduzir algum código no mesmo, para fazer o registro do Codemirror, fazer a chamada para os vários elementos e para o núcleo do codemirror. Para isso, insira o seguinte código dentro do ficheiro:
<?php
add_action('load-theme-editor.php', 'codemirror_register');
add_action('load-plugin-editor.php', 'codemirror_register');
function codemirror_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('blackboard', get_template_directory_uri()."/codemirror/theme/blackboard.css");
wp_register_script('xml', get_template_directory_uri()."/codemirror/mode/xml/xml.js");
wp_register_script('javascript', get_template_directory_uri()."/codemirror/mode/javascript/javascript.js");
wp_register_script('css', get_template_directory_uri()."/codemirror/mode/css/css.js");
wp_register_script('php', get_template_directory_uri()."/codemirror/mode/php/php.js");
wp_register_script('clike', get_template_directory_uri()."/codemirror/mode/clike/clike.js");
add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');
add_action('admin_head', 'codemirror_control_js');
}
Como poderá notar, estamos a utilizar o diretório codemirror. Caso você tenha definido outro nome de diretório, terá de fazer as alterações necessárias neste código para que o mesmo funcione.
Ainda dentro do ficheiro codemirror.php, insira o seguinte código:
function codemirror_enqueue_scripts() {
wp_enqueue_script('codemirror');
wp_enqueue_style('codemirror');
wp_enqueue_style('blackboard');
wp_enqueue_script('xml');
wp_enqueue_script('javascript');
wp_enqueue_script('css');
wp_enqueue_script('php');
wp_enqueue_script('clike');
}
De seguida insira o seguinte código:
function codemirror_control_js() {
if (isset($_GET['file'])) {
$filename_to_edit = end(explode("/", $_GET['file']));
$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1);
switch ($file) {
case "php": $file = "application/x-httpd-php"; break;
case "js" : $file = "text/javascript"; break;
case "css": $file = "text/css"; break;
}
}
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";
}
?>
E para finalizar, insira o seguinte trecho de código:
<script type="text/javascript">
jQuery(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
lineNumbers: true,
matchBrackets: true,
mode: "<?php echo $file ;?>",
indentUnit: 4,
indentWithTabs: true,
enterMode: "keep",
tabMode: "shift",
theme: "blackboard"
});
})
</script>
<?php
}
?>
Salve as alterações feitas ao ficheiro, e envie-o para o diretorio do codemirror:
3. INCLUIR O FICHEIRO CODEMIRROR.PHP
Este processo é bastante simples, que passa pela introdução do seguinte trecho de código dentro do ficheiro functions.php que está dentro do diretorio do seu template.
include("codemirror/codemirror.php");
Salve as alterações, e a partir deste momento o seu editor de código do WordPress irá ser alterado e passará deste estilo:
Para este estilo:
Como poderá observar nesta imagem, o editor não está a ocupar todo o espaço disponível para o mesmo, e por isso são necessárias algumas alterações ao nivel do CSS para que possamos tirar o maximo partido desta alteração ao editor de código dentro do WordPress.
4. ALTERAR O CSS
Dentro da pasta codemirror está a pasta lib, que contém o ficheiro codemirror.css. Localize o seguinte código:
.CodeMirror-scroll {
overflow-x: auto;
overflow-y: hidden;
height: 300px;
position: relative;
outline: none;
}
E altere-o para o seguinte:
.CodeMirror-scroll {
overflow-x: auto;
overflow-y: hidden;
height: 450px;
position: relative;
outline: none;
}
Desta forma terá mais espaço para ler o código e trabalhar sobre ele.
5. CÓDIGO FINAL
O código final a aplicar no ficheiro codemirror.php é o seguinte:
<?php
add_action('load-theme-editor.php', 'codemirror_register');
add_action('load-plugin-editor.php', 'codemirror_register');
function codemirror_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('blackboard', get_template_directory_uri()."/codemirror/theme/blackboard.css");
wp_register_script('xml', get_template_directory_uri()."/codemirror/mode/xml/xml.js");
wp_register_script('javascript', get_template_directory_uri()."/codemirror/mode/javascript/javascript.js");
wp_register_script('css', get_template_directory_uri()."/codemirror/mode/css/css.js");
wp_register_script('php', get_template_directory_uri()."/codemirror/mode/php/php.js");
wp_register_script('clike', get_template_directory_uri()."/codemirror/mode/clike/clike.js");
add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');
add_action('admin_head', 'codemirror_control_js');
}
function codemirror_enqueue_scripts() {
wp_enqueue_script('codemirror');
wp_enqueue_style('codemirror');
wp_enqueue_style('blackboard');
wp_enqueue_script('xml');
wp_enqueue_script('javascript');
wp_enqueue_script('css');
wp_enqueue_script('php');
wp_enqueue_script('clike');
}
function codemirror_control_js() {
if (isset($_GET['file'])) {
$filename_to_edit = end(explode("/", $_GET['file']));
$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1);
switch ($file) {
case "php": $file = "application/x-httpd-php"; break;
case "js" : $file = "text/javascript"; break;
case "css": $file = "text/css"; break;
}
}
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";
}
?>
<script type="text/javascript">
jQuery(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
lineNumbers: true,
matchBrackets: true,
mode: "<?php echo $file ;?>",
indentUnit: 4,
indentWithTabs: true,
enterMode: "keep",
tabMode: "shift",
theme: "blackboard"
});
})
</script>
<?php
}
?>
Se você pretender alterar o template utilizado no Codemirror, poderá escolher entre um dos seguintes:
Para proceder á alteração, basta no código procurar blackboard.css e alterar para um dos itens listados na imagem acima. Experimente alterar o template do codemirror para ver qual aquele que melhor se adequa ao seu gosto!
Abraço!
