21.02.2011


Примеры блоков кода в постах и страницах


Категории: Разработанное нами — Метки: — Administrator

На момент написания этого поста нам не удалось найти приемлемых plugins или функций, которые бы давали возможность эффективно вставлять примеры блоков кода в текст поста или страницы. Поэтому было решено написать свою функцию.
Изменения коснулись только файла схемы functions.php и файла стилей style.css.

В начало файла functions.php надо вставить фильтр:

  add_filter( 'the_content' , 'insert_codex' , '01' );

При его срабатывании будет вызвана функция insert_codex, которая произведет преобразования текста поста или страницы перед передачей его броузеру. Это нужно для того, чтобы заменить некоторые служебные символы в тексте и вставить разметку для блока кода. Вот текст функции:

function insert_codex ( $data ){
  while (true) {
    $pos1 = strpos($data,"[codex]");
    $pos2 = strpos($data,"[/codex]");
    if ($pos1 === false && $pos2 === false) { break; }
    if ($pos2 === false) { $data = $data."[/codex]"; }
    if (($pos1 > $pos2) || ($pos1 === false)) {
      $data = "[codex]".$data;
    }
    $pos2 = strpos($data,"[/codex]") + 8;
    $codex_part = str_replace(array('<','>',' ','–','"',"'"),array('<','>',' ','–','"','''),substr($data, $pos1, $pos2 – $pos1));
    $codex_part = str_replace(array('[codex]','[/codex]'),array('<div class="excode">','</div>'),$codex_part);
    $data = substr($data, 0, $pos1).$codex_part.substr($data, $pos2);
  }
  return $data;
}

Добавьте ее также в файл functions.php в любое место среди функций. Результат работы функции вы можете посмотреть на этой странице, просто откройте ее код. Удобство заключается в том, что в базе блок кода хранится в неизменном виде, его удобно править в редакторе.

Таким образом для того, чтобы вставить блок кода в пост используйте псевдо-таги [codex] и [/codex].

Чтобы использовать свои стили для блоков кода, вам необходимо внести изменения в файл style.css текущей схемы, класс для этого называется excode, вот пример наших стилей для этого случая:

.excode {
  width: 620px;
  font–family: Lucida Console;
  padding: 5px;
  margin: 5px;
  font–size: 0.8em;
  background: white;
  border: 1px dotted gray;
  color: black;
  overflow–x: auto;
  white–space: nowrap;
}

Блок кода будет положен в <div>, поэтому подбирайте стили для этого элемента.





Календарь


Архив