Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Инструменты, использованные в блоге. Часть 1

Список использованных механизмов в блоге. Часть 1.

23.03.2013 6 комментариев 9 398 просмотров

Список использованных механизмов в блоге. Часть 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/

\frac{1}{\sigma\sqrt{2\pi}}\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)

Плагин для отображения числа просмотров страницы

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;
}

Примеры иконок:

example.txt

example.zip

example.docx

example.pdf

example.xlsx

Отображение клавиш клавиатуры в тексте

Использую следующий код:

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 — плагин, чтобы добавлять некоторые постоянно использующиеся куски кода или шорткоды других плагинов, символы.

Вот пример моих кнопок:
2016-02-01_000453

В итоге получаем такое:
2016-01-31_234745

Файл с настройками кнопок в архиве: addquicktag.-02-23-2016.json_.zip

Arconix Shortcodes

Использую интересный плагин Arconix Shortcodes. Полный обзор я сделал тут: http://blog.harrix.org/?p=426

Позволяет делать текстовые блоки:

Блок с предупреждением

Блок с информацией

Сплойеры:

Сплойер
Текст сплойера

Кнопки:

Кнопка

Вкладки:

  • Вкладка 1
  • Вкладка 2
  • Вкладка 3
Первый блок информации
Второй блок информации
Третий блок информации

Всплывающая подсказка:
ИМХО

Выделенный текст:
Обратите внимание на текст.

В общем полезный плагин.

Таблицы

Подобное оформление таблицы описано в статье 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

  1. Адрес стандартного RSS потока лежит по адресу [Ваш блог]/feed (раньше было [Ваш блог]/?feed=rss2).
  2. RSS зарегистрировал в http://feedburner.google.com.
  3. В настройках WordPress Настройки → Написание в Сервисах обновления добавил строчку:
  4. 1
    http://ping.feedburner.com

    2016-03-09_003306

    Это чтобы Feedburner сразу получал сигнал об изменениях в статьях и публикациях новых.

  5. В настройках WordPress Настройки → Чтение в Для каждой статьи в RSS-ленте отображать выбрал Полный текст.
  6. В файле функций вашей темы ( у меня custom_functions.php) добавил код:
  7. 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 можете добавить приписку, какую хотите. Например, «Читать далее» или свой копирайт или иное.

  8. Чтобы принудительно обновить RSS в Feedburner, нужно зайти на страницу Решай проблемы (Troubleshootize) и нажать на кнопку Resync Now.
  9. Вставить куда-нибудь ссылку на RSS на сайте. Например, я вставил в меню. Например, ссылка может выглядеть так:
  10. 1
    <a href="http://feeds.feedburner.com/harrix">RSS</a>

Плагин для отображения списка статей

Использую плагин Display Posts Shortcode.

В тексте статей при вставке шорткода [display-posts] публикуется список статей. Например:

Список с нумерацией

1
[display-posts  posts_per_page="10" wrapper="ol"]

  1. Создание элементов в Android приложении программно
  2. Подключение SQLite в проектах Visual Studio в CRL проекте
  3. Вывод таблицы вручную в Visual Studio в CLR приложении
  4. Внешние ключи в DB Browser for SQLite
  5. Взаимодействие между фрагментами и активностью в Android Studio. Часть 5. Несколько фрагментов
  6. Взаимодействие между фрагментами и активностью в Android Studio. Часть 4. Через интенты
  7. Взаимодействие между фрагментами и активностью в Android Studio. Часть 3. Через интерфейсы
  8. Взаимодействие между фрагментами и активностью в Android Studio. Часть 2. Простые способы
  9. Взаимодействие между фрагментами и активностью в Android Studio. Часть 1. Подготовка
  10. Класс генератора случайных чисел для C++11

Список статей с метками Qt или QtQuick с нумерацией

1
[display-posts tag="Qt, QtQuick" posts_per_page="10" wrapper="ol"]

  1. Установка Boost под Qt
  2. Копирование файлов в build папку при компиляции проекта в Qt
  3. Как добавить иконку в приложение Qt под Android
  4. Сложение двух чисел в Qt 5.7.0 на C++ (Qt Quick Controls 2)
  5. Крякозябры в Qt под Visual Studio
  6. Сложение двух чисел в Qt 5.6.0 на C++ (Qt Labs Controls)
  7. Установка Qt под компилятор Visual Studio
  8. Интерпретатор функций в Qt – QJSEngine
  9. Подключение базы данных SQLite в Qt
  10. Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick Controls)

Список статей с метками Qt и QtQuick с нумерацией. То есть это пересечение двух множеств

1
[display-posts tag="Qt & QtQuick" posts_per_page="10" wrapper="ol"]

  1. Сложение двух чисел в Qt 5.7.0 на C++ (Qt Quick Controls 2)
  2. Сложение двух чисел в Qt 5.6.0 на C++ (Qt Labs Controls)
  3. Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick Controls)
  4. Qt Quick и C++ в Qt 5.6.0 Краткая инструкция
  5. Сложение двух чисел в Qt 5.6.0 на C++ (Qt Quick)
  6. Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick Controls)
  7. Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick)
  8. Проблема с названием qml файлов в QtQuick 2
  9. Соответствие include в Qt5 и Qt4 в QtQuick приложениях
  10. Видео в QtQuick 2.0

Список статей с нумерацией и отсортированный в алфавитном порядке

1
[display-posts posts_per_page="10" orderby="title" wrapper="ol" order="ASC"]

  1. «После дождичка в четверг» (рус.) и der Donner (нем.) – есть ли взаимосвязь?
  2. 3D графики в LaTeX пакетом pgfplots в стиле MathCAD
  3. Boot menu в Dell Inspiron 5547
  4. Connecting an existing SQLite database to Android Studio
  5. Elastic Grid – небольшие модификации плагина
  6. FAQ по Latex
  7. FAQ по Qt
  8. FAQ по ReadyScript 2
  9. FAQ по текстовому редактору Atom
  10. jQuery не работает в WordPress

За количество статей, которые будут выводиться отвечает параметр posts_per_page. Если я хочу, чтобы выводились все статьи, то использую большое значение, например, posts_per_page=”100000″.


Статьи по теме:

  1. Обзор плагина Arconix Shortcodes для WordPress
  2. Как показать в Worpdress документы PDF напрямую из GitHub
  3. Инструменты, использованные в блоге. Часть 2
  4. Как добавить на сайт видео из Google Drive

Web программирование Latex, Wordpress

© 2014 Harrix