Список использованных механизмов в блоге. Часть 1.
Содержание
- Тема, использованная для дизайна
- Шрифты
- Плагин для подсветки синтаксиса кода
- Плагин для отображения Latex текста
- Плагин для отображения числа просмотров страницы
- Плагин для показа иконок у прикрепленных файлов
- Отображение клавиш клавиатуры в тексте
- Содержание статей
- Добавление тэгов (шорткодов) в редактор статей
- Arconix Shortcodes
- Таблицы
- Плагин для индексирования в Google
- Двойные кавычки
- Список рекомендуемых (похожих статей)
- Работа с RSS
- Плагин для отображения списка статей
Тема, использованная для дизайна
В данный момент использую тему Drone
До этого использовал тему Flat.
До этого использовал тему Basic Themify.
Шрифты
В качестве основного шрифта используется Open Sans, а для отображения кода PT Mono:
1 2 |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800italic,800&subset=latin,cyrillic-ext,cyrillic,latin-ext); @import url(https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,cyrillic,cyrillic-ext,latin-ext); |
Плагин для подсветки синтаксиса кода
Crayon Syntax Highlighter — на мой взгляд на порядок лучше более популярного SyntaxHighlighter Evolved. Crayon умеет подсвечивать несколько языков в одном фрагменте, может переносить строки, имеет удобную панель работы с кодом. И не копирует номера строк при выделении кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
void HML_RandomRealMatrixInElements(double **VHML_ResultMatrix, double **Left, double **Right, int VHML_N, int VHML_M) { /* Функция заполняет матрицу случайными вещественными числами из определенного интервала. При этом каждый элемент изменяется в своих пределах. Входные параметры: VHML_ResultMatrix - указатель на матрицу; Left - левые границы интервала изменения каждого элемента (размер VHML_N x VHML_M); Right - правые границы интервала изменения каждого элемента (размер VHML_N x VHML_M); VHML_N - размер массива (число строк); VHML_M - размер массива (число столбцов). Возвращаемое значение: Отсутствует. */ for (int i=0;i<VHML_N;i++) for (int j=0;j<VHML_M;j++) VHML_ResultMatrix[i][j]=HML_RandomUniform(Left[i][j],Right[i][j]); } //--------------------------------------------------------------------------- |
Для оформления использую свой стиль кода, который похож на тему Coy из библиотеки Prism.js.
Файл оформления можно скачать: coy.zip.
Чтобы у вас в плагине появился стиль, файл из архива coy.css добавьте в папку:
[ваш сайт]/wp-content/uploads/crayon-syntax-highlighter/themes/coy/
Плюс еще добавил часть настроек, например, чтобы поменять шрифт, так как в панели выбора Crayon Syntax Highlighter шрифта PT Mono нет.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
pre, code { font-family: 'PT Mono', monospace; font-size: 12px; margin: 0px; } pre { padding-top: 5px !important; padding-bottom: 15px !important; } code { border-width:1px; border-color: #dedede; border-style: solid; } pre { background: none !important; } |
Плагин для отображения Latex текста
WP QuickLaTeX — умеет отображать корректно Latex код. При этом может даже графику отображать корректно. Так что очень удобная вещь.
Шпаргалка — http://www.holoborodko.com/pavel/quicklatex/
Плагин для отображения числа просмотров страницы
WP-PostViews — делает всё то, что нужно. Необходимо в нужном месте соответствующего php файла (у меня в функции zp_custom_post_info) вставить соответствующий код.
Не забывайте на странице настроек плагина перевести слово views.
Плагин для показа иконок у прикрепленных файлов
MimeTypes Link Icons — показывает иконку файла (по его расширению) и его размер в ссылках, что я вставляю в статьях.
На странице параметров плагина отметьте галочками форматы файлов, которые вы хотите снабжать иконками.
К сожалению, иконки в плагине используются довольно старые и классические. Поэтому для тех форматов, которые я использую, я прописал в css файле темы измененные иконки под стиль сайта. Также использование svg иконок позволяет качественно отображать для retina дисплеев.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
.mtli_doc { background: url('http://files.harrix.org/svg/doc-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_doc { background: url('http://files.harrix.org/svg/doc-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_doc:hover, .btn.mtli_doc:focus, .btn.mtli_doc:active { background: url('http://files.harrix.org/svg/doc-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_docx { background: url('http://files.harrix.org/svg/docx-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_docx { background: url('http://files.harrix.org/svg/docx-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_docx:hover, .btn.mtli_docx:focus, .btn.mtli_docx:active { background: url('http://files.harrix.org/svg/docx-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_xls { background: url('http://files.harrix.org/svg/xls-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_xls { background: url('http://files.harrix.org/svg/xls-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_xls:hover, .btn.mtli_xls:focus, .btn.mtli_xls:active { background: url('http://files.harrix.org/svg/xls-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_xlsx { background: url('http://files.harrix.org/svg/xlsx-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_xlsx { background: url('http://files.harrix.org/svg/xlsx-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_xlsx:hover, .btn.mtli_xlsx:focus, .btn.mtli_xlsx:active { background: url('http://files.harrix.org/svg/xlsx-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_pdf { background: url('http://files.harrix.org/svg/pdf-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_pdf { background: url('http://files.harrix.org/svg/pdf-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_pdf:hover, .btn.mtli_pdf:focus, .btn.mtli_pdf:active { background: url('http://files.harrix.org/svg/pdf-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_txt { background: url('http://files.harrix.org/svg/txt-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_txt { background: url('http://files.harrix.org/svg/txt-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_txt:hover, .btn.mtli_txt:focus, .btn.mtli_txt:active { background: url('http://files.harrix.org/svg/txt-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_zip { background: url('http://files.harrix.org/svg/zip-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_zip { background: url('http://files.harrix.org/svg/zip-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_zip:hover, .btn.mtli_zip:focus, .btn.mtli_zip:active { background: url('http://files.harrix.org/svg/zip-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_rar { background: url('http://files.harrix.org/svg/rar-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_rar { background: url('http://files.harrix.org/svg/rar-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_rar:hover, .btn.mtli_rar:focus, .btn.mtli_rar:active { background: url('http://files.harrix.org/svg/rar-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_mp4 { background: url('http://files.harrix.org/svg/mp4-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_mp4 { background: url('http://files.harrix.org/svg/mp4-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_mp4:hover, .btn.mtli_mp4:focus, .btn.mtli_mp4:active { background: url('http://files.harrix.org/svg/mp4-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } .mtli_mpeg { background: url('http://files.harrix.org/svg/mpeg-blue.svg'); background-size: 16px 16px; background-position: left center; } .btn.mtli_mpeg { background: url('http://files.harrix.org/svg/mpeg-white.svg'); background-size: 16px 16px; background-color: #de2b26; border-color: #de2b26; } .btn.mtli_mpeg:hover, .btn.mtli_mpeg:focus, .btn.mtli_mpeg:active { background: url('http://files.harrix.org/svg/mpeg-white.svg'); background-size: 16px 16px; background-color: #f54d4c; border-color: #f54d4c; } |
Примеры иконок:
Отображение клавиш клавиатуры в тексте
Использую следующий код:
1 2 3 4 5 6 7 8 9 |
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #de2b26; border-radius: 3px; box-shadow: none ; font-family:'PT Mono', monospace; } |
И получите, например такое: Нажмите клавиши Ctrl+S или пройдите в меню программы Preferences → Package Control.
Содержание статей
Использовался материал статей тут и тут.
В соответствующем файле добавляем код (у меня custom_functions.php).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* --------------------- Содержание --------------------- */ add_filter('the_content', 'make_contents'); function make_contents($content){ if( strpos($content, '[содержание')===false ) return $content; $patt = '\[содержание\s*([^\]]*)\]'; preg_match("@{$patt}(.*)@s", $content, $m); $hds = $m[1] ? trim($m[1]) : 'h2'; $hds = explode(' ', $hds); $hds = array_map('trim', $hds); $h = implode('|', $hds); @preg_match_all('@<(?:'.$h.')[^>]*>(.*?)</('.$h.')>@is', $m[2], $match); if(!$match) return $content; // заменяем заголовки и строим содержание $g=0; foreach( $match[0] as $ch ){ $t = &$match[2]; $anchor = $t[$g].'_'.$g; $new_ch = preg_replace("@>(.+?)<@", " id='$anchor' class='h2'><a href='#a_menu' title='Вернуться к содержанию'> \\1</a><", $ch, 1); $content = str_replace($ch, $new_ch, $content); $out .= '<li><a href="#'. $anchor .'">'. strip_tags($match[1][$g]) ."</a></li>\n"; if( $hds[1] && $t[$g]!=$t[$g+1] && isset($t[$g+1]) ){ if( !$on ){ $on=true; $out .= "<ul>\n"; } else { $on=false; $out .= "</ul>\n"; } } $g++; } $out = '<'.$hds[0].' id="a_menu" class="h2">Содержание</'.$hds[0].'><ul>'. $out .'</ul>'; $content = preg_replace("@{$patt}@", $out, $content, 1); return $content; } |
После этого в статье напишите тег [содержание] и появится содержание вашей статьи, как наверху этой статьи.
Добавление тэгов (шорткодов) в редактор статей
AddQuicktag — плагин, чтобы добавлять некоторые постоянно использующиеся куски кода или шорткоды других плагинов, символы.
Вот пример моих кнопок:
В итоге получаем такое:
Файл с настройками кнопок в архиве: addquicktag.-02-23-2016.json_.zip
Arconix Shortcodes
Использую интересный плагин Arconix Shortcodes. Полный обзор я сделал тут: http://blog.harrix.org/?p=426
Позволяет делать текстовые блоки:
Сплойеры:
Кнопки:
Вкладки:
Всплывающая подсказка:
ИМХО
Выделенный текст:
Обратите внимание на текст.
В общем полезный плагин.
Таблицы
Подобное оформление таблицы описано в статье http://blog.harrix.org/?p=4884.
ФИО | Оплата | Наличие ноутбука | Наличие паспорта |
---|---|---|---|
Сергиенко Антон Борисович | 1 123 руб. | ⚫ | ⚫ |
Владимиров Пётр Васильевич | 411 руб. | ⚫ | |
Воротцов Игорь Витальевич | 8 010 руб. | ⚫ | |
Вне обработки | |||
Уваров Борис Тимофеевич | 999 руб. | ⚫ | ⚫ |
Клесин Алексей Алексеевич | 48 458 руб. | ⚫ | ⚫ |
Кизоров Антоний Егорьевич | 0 руб. | ⚫ |
Плагин для индексирования в Google
Плагин Better WordPress Google XML Sitemaps создает карту сайта, которая при изменении или добавлении поста редактируется автоматически. Это позволяет быстро индексировать страницы в поисковике.
Двойные кавычки
Wordpress исправляет двойные кавычки на более приятные на взгляд лапки. Ну, это он так думает. Но этим портится весь код, который вставляется у меня не через плагин Crayon Syntax Highlighter.
В общем, в файле вашей темы, где прописываете php функции (у меня это custom_functions.php), и там добавляете код:
1 2 3 4 5 6 7 8 |
if ( function_exists('remove_filter') ) { # Отключим замену кавычек в тексте записей и страниц remove_filter('the_content', 'wptexturize'); # Отключим замену кавычек в заголовках записей и страниц remove_filter('the_title', 'wptexturize'); # Отключим замену кавычек в тексте комментариев remove_filter('comment_text', 'wptexturize'); } |
И после кавычки станут обычными, что не может не радовать.
Список рекомендуемых (похожих статей)
Сейчас использую плагин Yet Another Related Posts Plugin.
Раньше использовал такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args=array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'showposts'=>10 // Количество записей для показа. ); $my_query = new wp_query($args); wp_reset_query(); if( $my_query->have_posts() ) { echo '<h3>Рекомендую статьи:</h3><ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php } wp_reset_query(); echo '</ul>'; } } ?> |
Работа с RSS
- Адрес стандартного RSS потока лежит по адресу [Ваш блог]/feed (раньше было [Ваш блог]/?feed=rss2).
- RSS зарегистрировал в http://feedburner.google.com.
- В настройках WordPress Настройки → Написание в Сервисах обновления добавил строчку:
- В настройках WordPress Настройки → Чтение в Для каждой статьи в RSS-ленте отображать выбрал Полный текст.
- В файле функций вашей темы ( у меня custom_functions.php) добавил код:
- Чтобы принудительно обновить RSS в Feedburner, нужно зайти на страницу Решай проблемы (Troubleshootize) и нажать на кнопку Resync Now.
- Вставить куда-нибудь ссылку на RSS на сайте. Например, я вставил в меню. Например, ссылка может выглядеть так:
1 |
http://ping.feedburner.com |
Это чтобы Feedburner сразу получал сигнал об изменениях в статьях и публикациях новых.
1 2 3 4 5 6 7 8 9 10 11 |
function dear_abby_rss_teaser( $content ){ $teaser = preg_split( '/<span id/', $content ); $content = $teaser[0]; if ( has_post_thumbnail( $post->ID ) ) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full'); $content = '<div><img src="' . $image_src[0] . '" style="width:100%"></div>' . $content; } return $content; } add_filter( 'the_content_feed' ,'dear_abby_rss_teaser' ); |
Это чтобы в RSS не отдавалась вся статья, а только текст до тэга more. В переменную $readmore можете добавить приписку, какую хотите. Например, «Читать далее» или свой копирайт или иное.
1 |
<a href="http://feeds.feedburner.com/harrix">RSS</a> |
Плагин для отображения списка статей
Использую плагин Display Posts Shortcode.
В тексте статей при вставке шорткода [display-posts] публикуется список статей. Например:
Список с нумерацией
1 |
[display-posts posts_per_page="10" wrapper="ol"] |
- Создание элементов в Android приложении программно
- Подключение SQLite в проектах Visual Studio в CRL проекте
- Вывод таблицы вручную в Visual Studio в CLR приложении
- Внешние ключи в DB Browser for SQLite
- Взаимодействие между фрагментами и активностью в Android Studio. Часть 5. Несколько фрагментов
- Взаимодействие между фрагментами и активностью в Android Studio. Часть 4. Через интенты
- Взаимодействие между фрагментами и активностью в Android Studio. Часть 3. Через интерфейсы
- Взаимодействие между фрагментами и активностью в Android Studio. Часть 2. Простые способы
- Взаимодействие между фрагментами и активностью в Android Studio. Часть 1. Подготовка
- Класс генератора случайных чисел для C++11
Список статей с метками Qt или QtQuick с нумерацией
1 |
[display-posts tag="Qt, QtQuick" posts_per_page="10" wrapper="ol"] |
- Установка Boost под Qt
- Копирование файлов в build папку при компиляции проекта в Qt
- Как добавить иконку в приложение Qt под Android
- Сложение двух чисел в Qt 5.7.0 на C++ (Qt Quick Controls 2)
- Крякозябры в Qt под Visual Studio
- Сложение двух чисел в Qt 5.6.0 на C++ (Qt Labs Controls)
- Установка Qt под компилятор Visual Studio
- Интерпретатор функций в Qt – QJSEngine
- Подключение базы данных SQLite в Qt
- Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick Controls)
Список статей с метками Qt и QtQuick с нумерацией. То есть это пересечение двух множеств
1 |
[display-posts tag="Qt & QtQuick" posts_per_page="10" wrapper="ol"] |
- Сложение двух чисел в Qt 5.7.0 на C++ (Qt Quick Controls 2)
- Сложение двух чисел в Qt 5.6.0 на C++ (Qt Labs Controls)
- Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick Controls)
- Qt Quick и C++ в Qt 5.6.0 Краткая инструкция
- Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick)
- Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick Controls)
- Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick)
- Проблема с названием qml файлов в QtQuick 2
- Соответствие include в Qt5 и Qt4 в QtQuick приложениях
- Видео в QtQuick 2.0
Список статей с нумерацией и отсортированный в алфавитном порядке
1 |
[display-posts posts_per_page="10" orderby="title" wrapper="ol" order="ASC"] |
- «После дождичка в четверг» (рус.) и der Donner (нем.) – есть ли взаимосвязь?
- 3D графики в LaTeX пакетом pgfplots в стиле MathCAD
- Boot menu в Dell Inspiron 5547
- Connecting an existing SQLite database to Android Studio
- Elastic Grid – небольшие модификации плагина
- FAQ по Latex
- FAQ по Qt
- FAQ по ReadyScript 2
- FAQ по текстовому редактору Atom
- jQuery не работает в WordPress
За количество статей, которые будут выводиться отвечает параметр posts_per_page. Если я хочу, чтобы выводились все статьи, то использую большое значение, например, posts_per_page=”100000″.