Некоторые полезные правки для работы в Вордпресс
Иконка для сайта
Популярный плагин с возможностью нумерации строк и подсветки частей кода. Результат выводится в виде окна с прокруткой
Пример:
$sql .= " LEFT JOIN " . DB_PREFIX . "product_description pd ON (p.product_i
а. Вставляем в конец файла скриптов .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; } }
a rel=‘nofollow’ target=‘_blank’ href=’ssilka’
<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=Stargoroda', '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="Stargoroda" name="uri"/> <input type="hidden" value="<?php bloginfo('name'); ?>" name="title"/> <input type="hidden" name="loc" value="ru_RU"/> <input type="image" src="https://stargoroda.ru/wp-content/themes/Organic/images/b_subscribe.png" value="Subscribe" class="subscribepost" /> </form> </div>
/*Стрелка вверх*/ 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
<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/
перед закрывающим тегом 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/
//Кнопки в редактор 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
<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>
add_action(‘admin_footer’, ‘eg_quicktags’);
function eg_quicktags() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== ‘undefined’) {
QTags.addButton( ‘Spoiler’, ‘Spoiler’, ‘любой текст‘);
}
});
</script>
<?php
}
Итак, допустим, у вас есть готовый баннер, который вы заказали у профессионалов на биржах фриланса или создали самостоятельно. Ну, или вам его предоставил рекламодатель, но он представляет собой обычную картинку (jpeg, png) и совершенно не понятно, что делать дальше и как правильно установить ее на сайт.
Чтобы превратить обычное изображение в полноценную рекламу, вам понадобится следующий html-код баннера для вставки на сайт:
<img alt=»атрибут альт» src=»адрес изображения» width=»300″ height=»600″><a target=»_blank» rel=»nofollow» href=»ссылка»></a>
target=”_blank” – открывает сайт рекламодателя в другом окне и таким образом не ухудшает поведенческие факторы;
rel=”nofollow” – запрет на индексацию ссылки. Оставляем, чтобы не навредить продвижению сайта;
href=”ссылка” – меняем слово ссылка на партнерскую ссылку или ту, что дал рекламодатель;
alt=”атрибут альт” – вместо слов атрибут альт указываем, собственно, атрибут альт. Другими словами, это то же самое описание, которое мы составляем для всех картинок в наших статьях;
src=”адрес изображения” – вместо слов адрес изображения указываем адрес нашего баннера, загруженного на хостинг. Если не понимаете о чем я, подробная инструкция будет чуть ниже;
width=”300” height=”600” – указываем габариты изображения(ширина и высота соответственно) в пикселях. Ускоряет загрузку нашей рекламы.
Источник: https://iflife.ru/sozdanie-sayta-bloga/reklama-dlya-sayta/kak-dobavit-banner-na-sayt-wordpress-html-kod-bannera-dlya-vstavki-na-sayt
Открываем phpMyAdmin переходим на вкладку SQL и вписываем следующие строки
DELETE FROM wp_postmeta WHERE post_id IN (SELECT ID FROM wp_posts WHERE post_type = 'revision' AND post_name LIKE '%revision%'); DELETE FROM wp_term_relationships WHERE object_id IN (SELECT ID FROM wp_posts WHERE post_type = 'revision' AND post_name LIKE '%revision%'); DELETE FROM wp_posts WHERE post_type = 'revision' AND post_name LIKE '%revision%';
Нажимаем вперед
Открываем phpMyAdmin переходим на вкладку SQL и вписываем следующую строку
UPDATE wp_posts SET post_content = REPLACE (post_content, 'Старый текст', 'Новый текст');
Нажимаем вперед
Открываем phpMyAdmin переходим на вкладку SQL и вписываем следующую строку
DELETE FROM 'wp_posts' WHERE post_type='revision';
body { background: url(адрес картинки) no-repeat; }
no-repeat — одна картинка
#page { background: url(адрес картинки) center no-repeat fixed; }
прозрачность фона определяется свойством opacity: от 0.0 до1.0;
Если ниже ТОП-50 или ТОП-100, это указывает на дубли страниц, бан, малоценные страницы, недоработанная структура.

В правой части экрана можно сразу наблюдать изменения на сайте. Если результат удовлетворяет нажимаем обновить.
Redirect 301 /old.php https://site.ru/new.php
Новый адрес указываем полностью с http или https и доменным именем.