Вы здесь: Главная » Wordpress » Полезные мелочи для тем и плагинов на WordPress

Полезные мелочи для тем и плагинов на WordPress

30.05.2019 От Админ 14 комментариев

Добавление SVG-файлов в медиа-загрузчик WordPress

Если вы пытались когда-либо загрузить SVG в WordPress, то наверняка сталкивались с ошибкой, которую выдавал вам медиа-загрузчик.

На самом деле эта операция вполне возможна. Для этого в вашу тему в файл functions.php или плагин нужно добавить такую функцию:

function themeslug_extra_mime_types( $mimes ) {
   $mimes['svg'] = 'image/svg+xml';
   return $mimes;
}
add_filter( 'upload_mimes', 'themeslug_extra_mime_types' );

function themeslug_extra_mime_types( $mimes ) {

$mimes['svg'] = 'image/svg+xml';

return $mimes;

}

add_filter( 'upload_mimes', 'themeslug_extra_mime_types' );

Теперь смело загружайте нужный файл:

Жаль, что нет миниатюры, но и ошибки тоже нет.

После загрузки вам нужно будет вставить в запись (страницу) SVG-изображение. И вы это сделаете с помощью стандартной кнопки "Вставить в запись", НО файла вы не увидите. Не факт, что вы догадаетесь отобразить текст записи, хотя именно в нем есть ответ, почему картинки не видно. Все просто: атрибуты width и height тега <img> равны 1px, а такое маленькое изображение очень сложно увидеть:

<img class="aligncenter size-large wp-image-1132" src="https://yoursite.com/wp-content/uploads/2020/02/botanical.svg" alt="botanical" width="1" height="1" />

1	<img class="aligncenter size-large wp-image-1132" src="http://yoursite.com/wp-content/uploads/2020/02/botanical.svg" alt="botanical" width="1" height="1" />

Измените эти атрибуты на нужные вам значения (в примере 100px) и посмотрите на запись с точки зрения визуального редактора - картинка отобразилась:

Добавьте нужное выравнивание и посмотрите изменения. Будет примерно так:

Если загрузка SVG-файла не удалась, стоит поискать проблему в самом SVG. Банальное добавление строки

<?xml version="1.0" encoding="utf-8"?>

1	<?xml version="1.0" encoding="utf-8"?>

в самый верх вашего SVG может решить эту проблему. Хотя в вышеприведенном примере этой строки не было - а файл загрузился:

Страницы: 1 2 3 4 5 6 7

Автор: Админ

14 комментариев

Taras 28 декабря, 2019

Этого wp_kses() не нашел у себя.

Код вот такой у меня functions.php:

// Редактор в Биографии автора
add_filter( 'get_the_author_description', 'wptexturize' );
add_filter( 'get_the_author_description', 'convert_chars' );
add_filter( 'get_the_author_description', 'wpautop' );
add_action( 'show_user_profile', 'your_slug_add_editor' );
add_action( 'edit_user_profile', 'your_slug_add_editor' );

function your_slug_add_editor($user ){
if ( !current_user_can('edit_users') ) return;
$settings = array(
'media_buttons'=>0,
'textarea_name'=>'description',
'quicktags'=>1,
'teeny'=>0,
'tinymce'=> 1,
'textarea_rows'=>14,
);

$description = get_user_meta( $user->ID, 'description', true);
wp_editor( $description, 'description', $settings );
}

// Редактор в Биографии автора

add_filter( 'get_the_author_description', 'wptexturize' );

add_filter( 'get_the_author_description', 'convert_chars' );

add_filter( 'get_the_author_description', 'wpautop' );

add_action( 'show_user_profile', 'your_slug_add_editor' );

add_action( 'edit_user_profile', 'your_slug_add_editor' );

function your_slug_add_editor($user ){

if ( !current_user_can('edit_users') ) return;

$settings = array(

'media_buttons'=>0,

'textarea_name'=>'description',

'quicktags'=>1,

'teeny'=>0,

'tinymce'=> 1,

'textarea_rows'=>14,

);

$description = get_user_meta( $user->ID, 'description', true);

wp_editor( $description, 'description', $settings );

}

// Редактор в Биографии автора 2

function your_slug_add_scripts() {

wp_enqueue_script(
'your-slug-admin-script',
get_template_directory_uri() . '/js/admin-script.js',
array( 'jquery' ), 1.0, true
);
}
add_action( 'admin_enqueue_scripts', 'your_slug_add_scripts' );

function your_slug_add_scripts() {

wp_enqueue_script(

'your-slug-admin-script',

get_template_directory_uri() . '/js/admin-script.js',

array( 'jquery' ), 1.0, true

);

}

add_action( 'admin_enqueue_scripts', 'your_slug_add_scripts' );

В файле admin-script.js такой код:

<span class="crayon-sy">(</span><span class="crayon-t">(function($){
   // удаляем textarea
   $('#description').parents('tr').remove();
})(jQuery);

<span class="crayon-sy">(</span><span class="crayon-t">(function($){

// удаляем textarea

$('#description').parents('tr').remove();

})(jQuery);

Ответить

Админ 2 января, 2020

Жаль, Taras, что вы не удосужились посмотреть на код чуть выше в этой же статье. Там как раз описывается вариант, когда в стандартном поле ввода для биографических данных (описания) пользователя не сохраняются html-теги.
Там отменяется функция, подобная wp_kses():

//удаляем фильтр, который не позволяет вводить html-теги
remove_filter('pre_user_description', 'wp_filter_kses');
 
//добавляем другой фильтр, который разрешает использовать html-теги
add_filter('pre_user_description', 'wp_filter_post_kses');

//удаляем фильтр, который не позволяет вводить html-теги

remove_filter('pre_user_description', 'wp_filter_kses');

//добавляем другой фильтр, который разрешает использовать html-теги

add_filter('pre_user_description', 'wp_filter_post_kses');

При выводе информации о пользователе на странице поста можно также воспользоваться функцией wpautop():

<?php
$user_description = get_the_author_meta( 'user_description', $post->post_author );
echo "<div class='user-info'>".wpautop($user_description)."</div>";
?>

<?php

$user_description = get_the_author_meta( 'user_description', $post->post_author );

echo "<div class='user-info'>".wpautop($user_description)."</div>";

Ответить

Taras 26 декабря, 2019

Я пробовал разными путями добавлять фото и как вы описали, но всеравно не получаеться. А может это из за того, что у меня https а не http?

Ответить
- Админ 27 декабря, 2019
  
  Думаю, что https здесь ни при чем. Этот протокол автоматически подтянется в ссылку на изображение, когда вы его загрузили через медиа-загрузчик. Если, разумеется, у вас правильно настроен https на сайте и в админке, хоть это дело и несложное. В конце концов, кто мешает сделать ссылку вида //site.ru/wp-content/uploads/2019/11/foto-avtor.jpg, не вводя в нее протокол. Или еще меньше /wp-content/uploads/2019/11/foto-avtor.jpg?
  
  Есть вероятность, что где-то в коде при обработке вывода вашей информации есть функция типа wp_kses(), для которой запрещена обработка тега . А может, вы где-то допустили ошибку. Но точно можно сказать, только заглянув в код.
  
  Ответить
Taras 21 декабря, 2019

Что-то не получается, та же проблема, что и писал в первом сообщении. Визуальный редактор должен быть включен? https://ibb.co/rQTJx0B

Делал все так же:

добавил код ниже в functions.php
создал папку js в public_html и добавил туда файл с нужным кодом: /public_html/js/admin-script.js
сделал путь до файла js: get_template_directory_uri( '/js/admin-script.js' ),

// Редактор в Биографии автора
add_filter( 'get_the_author_description', 'wptexturize' );
add_filter( 'get_the_author_description', 'convert_chars' );
add_filter( 'get_the_author_description', 'wpautop' );
add_action( 'show_user_profile', 'your_slug_add_editor' );
add_action( 'edit_user_profile', 'your_slug_add_editor');

function your_slug_add_editor($user ){
if ( !current_user_can('edit_users') ) return;
$settings = array(
'media_buttons'=>0,
'textarea_name'=>'description',
'quicktags'=>1,
'teeny'=>0,
'tinymce'=> 1,
'textarea_rows'=>14,
);

$description = get_user_meta( $user->ID, 'description', true);
wp_editor( $description, 'description', $settings );
}
function your_slug_add_scripts() {

wp_enqueue_script(
'your-slug-admin-script',
get_template_directory_uri( '/js/admin-script.js' ),
array( 'jquery' ), 1.0, true
);
}
add_action( 'admin_enqueue_scripts', 'your_slug_add_scripts' );

Ответить
- Админ 22 декабря, 2019
  
  Проблема не в коде, а в подходе. И лежит она здесь:
  
  создал папку js в public_html и добавил туда файл с нужным кодом: /public_html/js/admin-script.js
  
  public_html - это корневая папка сайта, а вам нужна корневая папка темы. Она расположена по пути public_html/wp-content/themes/название_вашей_темы.
  
  Для того чтобы удостоверится, что скрипт подгрузился в вашей админ-панели, необходимо нажать Ctrl + U на странице редактирования профиля пользователя или выбрать пункт "Исходный код страницы"/"Поcмотреть код страницы" из контекстного меню по правому клику в любом месте страницы
  
  Затем нажмите CTRL+F и найдите свой скрипт на странице, введя название файла в поле поиска.
  
  Если такого файла у вас на странице нет, то, возможно, нужно перезагрузить страницу с обновлением кэша браузера (нажимаем CTRL + F5) и еще раз поискать его.
  Если js-файла опять там нет - ищите ошибку в путях подключения или размещения файла.
  
  Ответить
  - Taras 22 декабря, 2019
    
    Спасибо за подробности.
    
    А с точки зрения безопасности или каких-то других моментов, все эти изменения не отразятся в худшею стороно? Но информацию в поле "Биография" добавлять будет только я, доступ будет только у меня...
    
    Ответить
    - Админ 22 декабря, 2019
      
      Нет, то, что вы добавите, необходимо для вывода на какой-либо странице темы или внутри поста.
      Безопасность здесь вряд ли будет задета.
      Все манипуляции вы выполняете в админке, чтобы сохранить в БД не голый текст, а текст с каким-то форматированием - выделением жирным, курсивом или добавлением ссылок и т.п.
      Возможность редактировать данные всех пользователей есть только у админа, так что вряд ли стоит беспокоится.
      
      Ответить
      - Taras 23 декабря, 2019
        
        Спасибо, все заработало, но есть нюанс. Не сохраняеться и не выводиться фото в редакторе и на странице профиля автора. То есть: добавляю фото в редактор, сохраняю, а этот код пропадает в редакторе - вместо него пустота появляется:
        
        <img class="alignleft wp-image-877" src="https://site.ru/wp-content/uploads/2019/11/foto-avtor.jpg" alt="Фото-автор" width="280" height="167" />
      - Админ 25 декабря, 2019
        
        Не могу точно объяснить, в чем у вас причина, т.к. у меня все сохраняется и выводится. Скриншот:
        
        Может проблема в том, как вы это делаете?
        В обычном редакторе постов есть специальная кнопка "Добавить медиафайл", которая вызывает окно медиа-загрузчика WordPress.
        Здесь ее нет. Вместо этого вам нужно переключится в текстовый вид редактора из визуального и нажать на кнопку img.
        
        Возможно, вам стоит прочитать статью "Добавление фото пользователя в профиль WordPress" и воспользоваться кодом из нее?
Taras 17 декабря, 2019

Здравствуйте.

У меня вопрос по этой теме: Использование классического редактора WordPress (TinyMCE) для редактирования биографии пользователя в его профиле.

Делал все как вы написали:

Я добавил в файл functions.php код - https://ibb.co/dft26fz
Создал в public_html файл - my-script.js и добавил туда код

Но в админки все криво, два редавтора появилось - https://ibb.co/KFPk7vZ и https://ibb.co/gFRksz6

В чем может быть причина? Спасибо.

Ответить
- Админ 18 декабря, 2019
  
  Спасибо за вопрос. Дело в том, что в описании была ошибка.
  Вы делали все правильно, но у вас не сработал последний пункт, связанный с подключением скрипта к админке WordPress, т.к. именно там была ошибка.
  Последовательность действительно такова: сначала стандартный вид Биографии - https://prnt.sc/qcpoit, затем измененный с помощью фильтров, но нерабочий - https://prnt.sc/qcpr09.
  Ошибка была в 9-й строке - вместо
  add_action( 'admin_enqueue_scripts', 'your_slug_add_scripts' ); //подключает скрипт к админке
  было написано
  add_action( 'wp_enqueue_scripts', 'your_slug_add_scripts' ); //подключает скрипт к сайту (фронтэнду)
  После того, как вы это исправите и добавите скрипт с нужным кодом, должно все получится (https://prnt.sc/qcpz45)
  Имейте ввиду, что, если вы подключаете скрипт в теме, то вместо функции plugins_url( '/js/my-script.js', __FILE__ ) вам нужно использовать функцию get_template_directory_uri(). '/js/admin-script.js', которая указывает путь к файлам темы. В кавычках после слеша нужно указывать те папки и файлы, которые есть в вашей теме. Или создать их по этому пути.
  
  Ответить
  - Taras 19 декабря, 2019
    
    Спасибо за ответ. А что значит "в теме"?
    
    Имейте ввиду, что, если вы подключаете скрипт в теме...
    
    Ответить
    - Админ 20 декабря, 2019
      
      В WordPress есть 2 вида расширений - плагины и темы (шаблоны). И там, и там можно подключать скрипты.
      Основным файлом темы, в котором записываются различные функции, является файл functions.php. В нем обычно нужно прописывать пути для загрузки css- и js-файлов, используя функцию get_template_directory_uri().
      В плагинах основным файлом может быть любой. Чаще всего, его имя совпадает с названием папки с плагином. Для плагина загрузку css- и js-файлов обычно выполняют с помощью функции plugins_url( '/js/my-script.js', __FILE__ ).
      
      Ответить

Добавление SVG-файлов в медиа-загрузчик WordPress

Вам может понравиться

Как добавить пользовательские поля в форму отзывов WooCommerce?

Создание пользовательских типов записей в WordPress на примере отзывов

Страница настроек темы с помощью плагина ACF

14 комментариев

Добавить комментарий Отменить ответ