Вордпресс

  1. Чтобы вставить кусок кода в качестве примера в статью можно использовать плагин SyntaxHighlighter.
    Популярный плагин с возможностью нумерации строк и подсветки частей кода. Результат выводится в виде окна с прокруткой
    Пример:
$sql .= " LEFT JOIN " . DB_PREFIX . "product_description pd ON (p.product_i

2. Всплывающие картинки.
Необходимо вставить код в .js и css

а. Вставляем в конец файла скриптов .js, отвечающего за вывод картинок на странице, следующий код

 

 // Материал с сайта https://digital-boom.ru/coding/wordpress/vsplyvayushhie-izobrazheniya-v-wordpress.html //
Описания пунктов можно удалить
// получаем все ссылки с картинками
а после точки - это наш класс, который мы прописали, редактирую картинку//
var a_i = document.querySelectorAll('a.a');

// перебираем все такие ссылки на странице
[].forEach.call(a_i, function(el){
// навешиваем функцию при клике на ссылку (то есть на изображение)
el.onclick = function(e){
// отменяем переход по ссылке в новую вкладку в браузере
e.preventDefault();
// получаем путь к нашей картинке
var href = el.getAttribute('href');
// получаем путь к превьюхе картинки (дальше поймете зачем)
var href_min = el.getElementsByTagName('img')[0].getAttribute('src');
// объявляем переменные, с которыми нам предстоит поработать
var iOverlay, body, iImg;

// 01 если элементы не были созданы, то создаем их (подложка и изображение)
if(document.querySelectorAll('.i_overlay').length == 0){
// создаем элемент для подложки
iOverlay = document.createElement('div');
// добавляем подложке класс, для навешивания стилей
iOverlay.className = 'i_overlay';
// и еще один класс для управления видимостью
iOverlay.classList.add('visible');
// добавляем подложку в DOM дерево
body = document.body;
body.appendChild(iOverlay);
// создаем элемент для нашей всплывающей картинки
iImg = document.createElement('img');
// добавляем классы
iImg.className = 'i_img';
iImg.classList.add('visible');
// добавляем картинку в DOM дерево
body.appendChild(iImg);
}
// 02 если элементы уже были созданы, то просто переиспользуем их
else {
// 02.01 находим их и делаем снова видимыми (потому что в будущем мы успели сделать их невидимыми)
iOverlay = document.querySelectorAll('.i_overlay')[0];
iImg = document.querySelectorAll('.i_img')[0];
iOverlay.classList.add('visible');
iImg.classList.add('visible');
}
// добавляем подложке путь на превью нашей картинки
// чтобы фон гармонировал с цветовой гаммой самого изображения
iOverlay.style.backgroundImage = 'url(' + href_min + ')';
// добавляем картинке путь на само изображение на сервере
iImg.setAttribute('src', href);
// а на фон поставим картинку в плохом качестве
// чтобы хоть что-то можно было увидеть, пока загружается большая картинка
// (если у кого-то медленный интернет)
iImg.style.backgroundImage = 'url(' + href_min + ')';

// а при клике на подложу, мы скрываем наши элементы
// но не удаляем их, чтобы потом использовать заново в пункте 02.01 (привет из будущего)
iOverlay.onclick = function(){
iOverlay.classList.remove('visible');
iImg.classList.remove('visible');
}
}
})

б. В файл стилей style.css прописываем

.i_overlay.visible,
.i_img.visible{
display: block;
}
.i_overlay{
display: none;
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
z-index: 100;
cursor:pointer;
background-size: cover;
filter: blur(50px);
opacity: 0.75;
animation: i_overlay 0.25s linear;
}
.i_img{
display: none;
position: fixed;
width: auto;
height: auto;
max-width: 85vw;
max-height: 85vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: cover;
box-shadow: 0 5px 25px 5px rgba(0,0,0,0.75);
z-index: 200;
animation: i_img 0.4s cubic-bezier(.44,-0.3,.59,1.44);
}
/* добавим немного анимации, чтобы все было красиво */
@keyframes i_overlay {
0% { opacity: 0; }
100% { opacity: 0.75; }
}
@keyframes i_img {
0%, 45% { top: 40%; opacity: 0; }
100% { top: 50%; opacity: 1; }
}

3. Закрыть от индексации внешние ссылки на сайте в том числе и счетчики

a rel=‘nofollow’ target=‘_blank’ href=’ssilka’

4. Форма подписки на RSS

<div class="subscribetextbgpost">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input name="email" type="text" value="Введите Ваш e-mail" class="subscribe_textieldpost" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" />
<input type="hidden" value="Ktonanovenkogoru" name="uri"/>
<input type="hidden" value="<?php bloginfo('name'); ?>" name="title"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="image" src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/b_subscribe.png" value="Subscribe" class="subscribepost" />
</form>
</div>

5. Стрелка вверх на странице сайта.

Добавить в конец файла «functions.php» код, загрузить на сайт нужную картинку и прописать ее адрес в коде

/*Стрелка вверх*/
add_action( 'wp_footer', 'back_to_top' );
function back_to_top() {
echo '<img id="totop" src="/wp-content/uploads/2021/04/strelka-50.png" />';
}
 
add_action( 'wp_head', 'back_to_top_style' );
function back_to_top_style() {
echo '<style type="text/css">
#totop {
cursor:pointer;
position: fixed;
right: 30px;
bottom: 30px;
display: none;
outline: none;
}
</style>';
}
 
add_action( 'wp_footer', 'back_to_top_script' );
function back_to_top_script() {
echo '<script type="text/javascript">
jQuery(document).ready(function($){
$(window).scroll(function () {
if ( $(this).scrollTop() > 400 )
$("#totop").fadeIn();
else
$("#totop").fadeOut();
});
 
$("#totop").click(function () {
$("body,html").animate({ scrollTop: 0 }, 800 );
return false;
});
});
</script>';
}

Материал с сайта https://wp-lessons.com/kak-sdelat-knopku-vverh-v-wordpress
6. Разворачивающийся текст
html

<div class="demo">
<input class="hide" id="hd-1" type="checkbox">
<label for="hd-1">Нажмите здесь, чтобы прочитать больше о HTML!</label>
<div>
HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
</div>
<br/>
<br/>
<input class="hide" id="hd-2" type="checkbox">
<label for="hd-2">Нажмите здесь, чтобы прочитать больше о CSS!</label>
<div>
CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
</div>

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);
*, ::after, ::before {
box-sizing: border-box;
}
html, body {
height: 100%;
margin:0;
padding:0;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
/* demo контейнер */
.demo {
max-width: 1024px;
padding: 0 20px;
margin: 5% 10%;
}
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
margin: 0;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;
background: #efefef;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
margin-left: 20px;
padding: 10px;
/* чуточку анимации при появлении */
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: #1e90ff;
color: #fff;
content: "\002B";
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 16px;
line-height: 16px;
margin: 3px 5px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\2212";
}

Материал с сайта https://dbmast.ru/

7. Подключаем bootstrap к wordpress
— Подключение jQuery в HTML
перед закрывающим тегом head необходимо разместить такую строку:
-можно включить в работу jQuery с CDN Google. Вместо вышеприведённой строчки внести запись:

(взято с сайта https://hoboweb.ru/kak-podkljuchit-biblioteku-jquery/)

  • Скачиваем библиотеку bootstrap на локальный компьютер с официального сайта
  • Распаковываем содержимое архива в свою тему «/wp-content/themes/ваша_тема/bootstrap/
  • Подключаем bootstrap в header.php перед
<link href="/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/bootstrap/js/bootstrap.min.js"></script>

В качестве примера выводим код в три колонки

ААА
БББ
ДДД

Материал с сайта https://allwordpress.ru/kak-podklyuchit-bootstrap-k-wordpress-prosto/

8. Спойлер (раскрывающийся текст) при нажатии на ссылку

1. Создаем кнопку в редакторе и шорткод в вашей теме

//Кнопки в редактор
if( !function_exists('my_buttons') ){
function my_buttons()
{ ?>
<script type="text/javascript">
QTags.addButton( 'Spoiler', 'Spoiler', '[collapse title="любой текст"]', '[/collapse]' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'my_buttons');
}
//конец
//Спойлер шорткод
function swpcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div style="margin: 0; padding:0;">
        <div class="SWPControl">
            <span class="SWPTitle">'.$title.'</span>
            <a href="javascript:void(0)" class="collapseButton SWPButton">Развернуть/свернуть</a>
            <div style="clear: both;"></div>
        </div>
        <div class="SWPContent" style="display: none;">'.$content.'</div>
    </div>';
}
add_shortcode('collapse', 'swpcollapse');

2. Прописываем свои стили в файле css

.SWPControl {
  background: #FFFF89;
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 600 !important;
  padding:10px;
  border-radius: 3px;
  box-shadow: 0 -0.085em 0 0 rgba(102, 52, 0, 0.2) inset, 0 0 3px 0 rgba(254, 255, 187, 0.5) inset;
  color: #000;
}

a.collapseButton {
    color: #D33F1D !important;
    /*font-weight: 500 !important;*/
    line-height: 22px;
    text-decoration: none !important;
}

span.SWPTitle::before {
    color: #000;
    content: "☻";
    font-size: 27px;
    line-height: 22px;
    display: inline-block;
    animation: credits 1s infinite;
    -webkit-animation: credits 1s infinite;
    animation-name: credits;
    -webkit-animation-name: credits;
    transition: all 0.3s linear 0s;
}
@keyframes credits {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-10px);}
        60% {transform: translateY(-5px);}
}
@-webkit-keyframes credits {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-10px);}
        60% {-webkit-transform: translateY(-5px);}
}

3. В header.php или footer.php добавляем короткий скрипт плавно раскрывающий текст.

<script>
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
            jQuery(this).parent().parent().find('.SWPContent').slideToggle('slow');
        });
    });
</script>

Материал с сайта http://wordsmall.ru/bez-plagina/wordpress-raskryvayushhijsya-tekst-spojler-pri-nazhatii-na-ssylku.html

9. Картинка в заголовок

<div class="row hidden-xs mar-top fade">
<div class="col-md-12">
<a href="https://seameh.ru/day-navy-2021/">
<img src="https://seameh.ru/wp-content/uploads/2021/07/Безымянный.jpg" class="img-responsive" title="День Военно Морского Флота России 2021">
</a>
</div>
</div>

10. Массовое создание страниц в вордпресс
Делается с помощью плагинов. Один из таких плагиновBulk Page Creator. Есть возможность создание одной или нескольких страниц, указать родительскую категорию, запись или страницу. Если необходимо создать несколько страниц в диалоговое окошко необходимо внести запись заголовков страниц через запятую без пропусков.


HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..


CSS — CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Дополнительные кнопки в редактор Вордпресс

//дополнительные кнопки в текстовом редакторе
add_action(‘admin_footer’, ‘eg_quicktags’);
function eg_quicktags() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== ‘undefined’) {
QTags.addButton( ‘Spoiler’, ‘Spoiler’, ‘любой текст

‘, ‘
‘ );

}
});
</script>
<?php
}

© 2021-2022 Инструкции

Содержимое сайта носит ознакомительный характер, и не являются предложением к продаже.

При использовании материалов сайта, прямая ссылка на "www.seameh.ru" обязательна!

Яндекс.Метрика