wp_list_pages - есть способ сократить название для отображения в сноске на небольших экранах конкретных страниц

Question

у меня есть WordPress сайт, и я использую wp_list_pages в моем сноске (как автоматизированный список карты сайта) следующим образом:

<ul style="list-style-type: none;"><?php wp_list_pages('exclude=143,1040,1045,1048&title_li='); ?></ul> 

На нескольких страницах у меня есть более длинные заголовки. Это отлично работает для экранов большего размера, но не так хорошо при меньших размерах экрана (слишком много линий).

Есть ли способ, с помощью которого я могу запрограммировать определенные идентификаторы страниц, чтобы использовать @media Media Queries и изменить название для меньших размеров экрана?

Я видел кто-то делает что-то вроде этого, чтобы изменить название для некоторых страниц, чтобы быть «Поэзия»:

<?php wp_list_pages(array(
    'include' => array(5, 9, 23), 
    'title_li' => '<h2>' . __('Poetry') . '</h2>' 
    ); ?> 

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

Возможно ли это?

Спасибо за любую помощь.

Answer 1

Я верю, что вы ищете Отзывчивый веб-дизайн. Использование определенных стилей для отображения/скрытия элементов на основе размера экрана возможно с помощью адаптивного веб-дизайна, который выполнит то, что вы хотите сделать.

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

Вы можете выводить текст, который вы хотите для каждого целевого размера экрана, а затем показать/скрыть соответствующий HTML-элемент.

Вы также можете взглянуть на фреймворк bootstrap CSS, чтобы получить представление о том, что вы можете выполнить с помощью надежного набора чувствительных классов CSS и точек останова.

http://getbootstrap.com/css/#responsive-utilities

Answer 2

Существует один способ отображения обрезанного текста на основе ширины окна браузера, но некоторые JS необходимо будет в том, что ..

Позвольте мне идти шаг за шагом.

1. Печать на подстраниц и обеспечивают и ID на ул (поместить необходимые аргументы в функции wp_list_pages)

   <?php 
   $children = wp_list_pages('echo=0'); 
   if ($children) : ?> 
       <ul id="subpages"> 
        <?php echo $children; ?> 
       </ul> 
   <?php endif; ?> 
   

2. В сноске страницы написать JQuery для печати 2 поверочного тег внутри каждого <a> тег <li>

   <script type="text/javascript"> 
       jQuery(document).ready(function($) { 
         $('#subpages li a').each(function(){ 
        var org_text = $(this).html(); 
   
        var trimed_text = ''; 
        if(org_text.length > 8){ 
         trimed_text = org_text.substr(0, 8)+'...'; 
        } else{ 
         trimed_text = org_text; 
        } 
        $(this).html('<span class="trimmed">'+trimed_text+'</span><span class="original">'+org_text+'</span>'); 
        }); 
       }); 
       </script> 
   

   Это поставит 2 <span> метки внутри каждого <a>. Например: Если название вашей страницы «Пример страницы», то <span class="trimmed">Sample P...</span><span class="original">Sample Page</span>. Один пролет, содержащий класс class="trimmed" и другой, содержащий class="original".

3. Теперь с помощью CSS медиа-запроса вы можете отобразить эти доли не пролетных теги по именам классов

   @media screen and (min-width: 480px) { 
       .trimmed { 
        display : block; 
       } 
       .original { 
        display : none; 
       } 
   
   } 
   

Как я не CSS парень, поэтому поставить медиа-запрос правильно. Но это может быть сделано для работы в соответствии с вашими требованиями.