Как добавить в меню картинку без плагина?

Question

[trenton]

Вот например как тут https://stuff-shop.com/

Нашел способ тут https://slicejack.com/create-fully-custom-wordpres..., но сайдбар в админке не появляется.
Предполагаю, что walker-ом, перед закрытием ul-а как-то сделать область для картинки.
С динамическим добавлением виджетов как в найденном способе было бы хорошо.

Comments

[Владимир Брумер]

хоть видео, хоть изображение... гуглите add_action('wp_nav_menu_item_custom_fields' - для добавления полей, add_action('wp_update_nav_menu_item' - для сохранения в базе, add_filter('walker_nav_menu_start_el' - для переопределения (во многих случаях можно обойтись без walker)... ну либо через walker

[Владимир Брумер]

можете даже попробовать использовать встроенный дескрипшин и только add_filter('walker_nav_menu_start_el' + css / js ... все зависит от задачи

[trenton]

Владимир Брумер, я что-то гуглю, про хук информация попадается, но пока не попалось примеров с картинкой или видео. А такое часто нужно в проектах. Может у Вас есть что-то из примеров в закладках? Можно и на английском если что, главное пример,я поразбираю

[Владимир Брумер]

trenton,

add_action('wp_nav_menu_item_custom_fields' - для добавления полей

а вот, чтобы добавить видео, либо изображение Вам нужно гуглить WordPress медия загрузчик wp_enqueue_media wp_enqueue_media(); (т.е. Вам надо искать скрипт). Добавлять-то Вы через библиотеку желаете, я думаю.

Может у Вас есть что-то из примеров в закладках?

примеров в закладках, к сожалению, нет. т.к. тоже в свое время не нашлось... Но могу описать принцип... С учетом, что поля вы добавить и сохранить уже можете

информация попадается, но пока не попалось примеров с картинкой или видео

Подключение всех файлов необходимых для использования медиа API WordPress в комментарии или в Google

что-то похожее на это

<script type="text/javascript">
		jQuery(document).ready(function($){
			function MediaButtonFunction(){
				$('.MediaButton').click(function(e){
					e.preventDefault();
					var Media_type;
					if($(this).hasClass('Media_Img')){
						Media_type='image';
					}else if($(this).hasClass('Media_Audio')){
						Media_type='audio';
					}
					var $upload_button=$(this),custom_uploader=wp.media.frames.file_frame=wp.media({title:'<?php _e('Выбрать/Загрузить медиафайл','VAB');?>',library:{type:[Media_type]},button:{text:'<?php _e('Выбрать','VAB');?>'},multiple:false});
					custom_uploader.open();
					custom_uploader.on('select',function(){
								// метод state() определяет текущее состояние объекта  first() создает новый объект
						var attachment=custom_uploader.state().get('selection').first().toJSON();///возвращается как объект выделеный файл
						$upload_button.siblings('textarea').val(attachment.url);});});
				}
			MediaButtonFunction();
		});
		</script>

то, что после

var attachment=custom_uploader.state().get('selection').first().toJSON();

а именно в этом примере

$upload_button.siblings('textarea').val(attachment.url);

у Вас должно быть свое. Все зависит от вашей разметки, которую вы оформляете в меню...

то, что нагуглил на лету по первым результатам гугла (в этой же статье ссылка на источник внизу)

или первые 8 минут можете глянуть, если не разберетесь со скриптом (скрипт выше из этого видео), но не в кастом меню

только в меню Вам надо будет цепляться к идентификатору меню, иначе нажмете на кнопку и откроется столько окон галереи, сколько у Вас пунктов меню...

Типо

if(!function_exists('vab_menu_custom_fields')){function vab_menu_custom_fields($item_id,$item){$Noalt=__('Атрибут alt не заполнен','VAB');?>
<script type="text/javascript">jQuery(document).ready(function($){function MediaButtonFunction(){$('.MediaButton<?php echo$item_id;?>').click(function(e){
...
</script>
...
<input type="button" class="MediaButton<?php echo$item_id;?> Media_Img" value="<?php _e('Библиотека изображений','VAB');?>">
<input type="button" class="MediaButton<?php echo$item_id;?> Media_Video" value="<?php _e('Библиотека видео','VAB');?>">
...
<?php }}add_action('wp_nav_menu_item_custom_fields','vab_menu_custom_fields',10,2);

важный момент <?php echo $item_id;?>

з.ы. Медиа загрузчик нагуглить не сложно - тама заезжена и применима на сегодня. Если нет примера в интернете именно с использованием его в меню, не значит, что оно там не применимо. Включаете поддержку как и с колорпикером

spoiler

wp_enqueue_style('wp-color-picker');wp_enqueue_script('wp-color-picker');

и суете куда Вам только вздумается с небольшими изменениями в зависимости от ситуации...

[trenton]

Владимир Брумер, Спасибо, поразбираю. С колор-пикером Вы мне когда-то очень помогли, в итоге я сделал то, что хотел.

[Владимир Брумер]

trenton, если что, пишите ...

Answer 1

[Elio Don]

Кратко:
Берёшь картинку и кидаешь в медафайлы, копируешь ссылку местоположения (оно там же)

Заходишь в настройки темы - доп стили

Создаёшь класс к примеру .menuicon

Указываешь путь к картинке (ссылка которую скопировал в начале) и дописываешь чтобы оно не повторялось и размер был к примеру 30px

Идёшь в редактор меню, создаёшь произвольное, добавив в меню, открываешь и добавляешь ссылку, и внизу в классах вставляешь класс который ты создал

Всё!