php - 在php中更改为多列情况

Question

最近我们一直在使用购买的 WP 主题(Jupiter)为我们的业务创建一个网站，我的老板，老板，已经做了一些他想要的非常特别的修改(有些是出于我不明白的原因)并给出了我具有 HTML 和 CSS 的工作知识，以及非常非常基本的 PHP 知识，我已经尝试并能够进行他的所有定制，除了一个:

主题设计为响应式，因此，自定义投资组合画廊样式(在计算机上显示为图片库:http://14d.mercysou.server312.com/photos)将在不同设备上逐渐缩小，以便当您缩小到智能手机，只会显示 1 列图像，您可以向下滚动。我的主管希望对其进行自定义，以便无论屏幕尺寸如何，即使在手机上，屏幕上始终至少有 2 列图像。这个投资组合画廊(称为“砌体”)的 PHP 如下:

<?php
function mk_portfolio_masonry_loop(&$r, $atts)
{
global $post;
extract($atts);
global $mk_options;

$output     = '';
$terms      = get_the_terms(get_the_id(), 'portfolio_category');
$terms_slug = array();
$terms_name = array();
if (is_array($terms)) {
    foreach ($terms as $term) {
        $terms_slug[] = $term->slug;
        $terms_name[] = '<span>' . $term->name . '</span>';
    }
}

$post_type = get_post_meta($post->ID, '_single_post_type', true);
$post_type = !empty($post_type) ? $post_type : 'image';
$link_to   = get_post_meta(get_the_ID(), '_portfolio_permalink', true);

$hover_overlay_value = get_post_meta($post->ID, '_hover_skin', true);
$hover_overlay       = !empty($hover_overlay_value) ? (' style="background-color:' . $hover_overlay_value . '"') : '';

$column = get_post_meta(get_the_ID(), '_masonry_img_size', true);
$column = !(empty($column)) ? $column : 'x_x';

switch ($column) {
    case 'x_x':
        $width  = 300;
        $height = 300;
        break;

    case 'two_x_x': // 
        $width  = 600;
        $height = 300;
        break;

    case 'three_x_x':
        $width  = 900;
        $height = 300;
        break;
    case 'four_x_x':
        $width  = 1200;
        $height = 300;
        break;

    case 'x_two_x':
        $width  = 300;
        $height = 600;
        break;
    case 'two_x_two_x':
        $width  = 600;
        $height = 600;
        break;
    case 'three_x_two_x':
        $width  = 900;
        $height = 600;
        break;

    case 'four_x_two_x':
        $width  = 1200;
        $height = 600;
        break;

    default:
        $width  = 300;
        $height = 300;
        break;
}

$lightbox_full_size = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full', true);

$permalink = '';
if (!empty($link_to)) {
    $link_array = explode('||', $link_to);
    switch ($link_array[0]) {
        case 'page':
            $permalink = get_page_link($link_array[1]);
            break;
        case 'cat':
            $permalink = get_category_link($link_array[1]);
            break;
        case 'portfolio':
            $permalink = get_permalink($link_array[1]);
            break;
        case 'post':
            $permalink = get_permalink($link_array[1]);
            break;
        case 'manually':
            $permalink = $link_array[1];
            break;
    }
}
if ($ajax == 'true' || empty($permalink)) {
    $permalink = get_permalink();
}
$output .= '<article id="' . get_the_ID() . '" class="mk-portfolio-item mk-portfolio-masonry-item masonry-'.$item_id.' mk-isotop-item  ' . $hover_scenarios . '-hover size_' . $column . ' portfolio-' . $post_type . ' ' . implode(' ', $terms_slug) . '">';
$image_src_array = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full', true);
$image_src       = bfi_thumb($image_src_array[0], array(
    'width' => $width * $image_quality,
    'height' => $height * $image_quality
));

$item_bg_color_value = get_post_meta($post->ID, '_hover_skin', true);
$item_bg_color       = !empty($item_bg_color_value) ? (' background-color:' . $item_bg_color_value . '!important') : '';
$output .= '<div style="margin:0 ' . ($grid_spacing / 2) . 'px ' . $grid_spacing . 'px;" class="item-holder">';

//$output .= ($hover_scenarios == 'fadebox' || $hover_scenarios == 'none') ? '<a class="project-load" data-post-id="' . get_the_ID() . '" href="' . $permalink . '">' : '';


$output .= '<div class="featured-image">';
$output .= '<img alt="' . get_the_title() . '" class="item-featured-image" title="' . get_the_title() . '" src="' . mk_thumbnail_image_gen($image_src, $width, $height)  . '" itemprop="image" />';
if ($hover_scenarios == 'fadebox') {
    $output .= '<div class="hover-overlay gradient"' . $hover_overlay . '></div>';
} else {
    if ($hover_scenarios == 'zoomout') {
        $output .= '<div class="image-hover-overlay" style="' . $item_bg_color . '"></div>';
    } else {
        $output .= '<div class="image-hover-overlay"></div>';
    }
}


if ($hover_scenarios == 'fadebox') {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a rel="portfolio-grid" title="' . get_the_title() . '" data-fancybox-group="portfolio-masonry-item" class="zoom-badge mk-lightbox" href="' . $image_src_array[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" data-fancybox-group="portfolio-masonry-item" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';
}

if ($hover_scenarios == 'light-zoomin' ) {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a rel="portfolio-grid" title="' . get_the_title() . '" data-fancybox-group="portfolio-masonry-item" class="zoom-badge mk-lightbox" href="' . $image_src_array[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" data-fancybox-group="portfolio-masonry-item" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';

}

if ($hover_scenarios != 'fadebox' && $hover_scenarios != 'light-zoomin' && $hover_scenarios != 'none') {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a data-fancybox-group="portfolio-grid" title="' . get_the_title() . '" class="zoom-badge mk-lightbox" href="' . $lightbox_full_size[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';

}



if ($hover_scenarios != 'none') {

     $output .= ($hover_scenarios == 'slidebox') ? '<div class="portfolio-meta"' . $hover_overlay . '>' : '<div class="portfolio-meta">';
     $output .= '<h3 class="the-title">' . get_the_title() . '</h3><div class="clearboth"></div>';
     if ($meta_type == 'category') {
         $output .= '<div class="portfolio-categories">' . implode(', ', $terms_name) . ' </div>';
     } else {
         $output .= '<time class="portfolio-date" datetime="' . get_the_date() . '">' . get_the_date() . '</time>';
     }
     $output .= '</div><!-- Portfolio meta -->';

}

$output .= '</div><!-- Featured Image -->';


//$output .= ($hover_scenarios == 'fadebox' || $hover_scenarios == 'none') ? '</a><!-- project load -->' : '';
$output .= '</div>';


$output .= '</article>' . "\n\n\n";
return $output;}

我知道为了实现我想要的 2 列样式我需要修改的是第 30 行及其周围，尤其是这一部分:

$column = get_post_meta(get_the_ID(), '_masonry_img_size', true);
$column = !(empty($column)) ? $column : 'x_x';

switch ($column) {
    case 'x_x':
        $width  = 300;
        $height = 300;
        break;

    case 'two_x_x': // 
        $width  = 600;
        $height = 300;
        break;

    case 'three_x_x':
        $width  = 900;
        $height = 300;
        break;
    case 'four_x_x':
        $width  = 1200;
        $height = 300;
        break;

    case 'x_two_x':
        $width  = 300;
        $height = 600;
        break;
    case 'two_x_two_x':
        $width  = 600;
        $height = 600;
        break;
    case 'three_x_two_x':
        $width  = 900;
        $height = 600;
        break;

    case 'four_x_two_x':
        $width  = 1200;
        $height = 600;
        break;

    default:
        $width  = 300;
        $height = 300;
        break;
}

我已经阅读了几篇教程并尽力创建一个 2 列函数并在 switch 中使用它，但我担心我的 PHP 知识不足以正确实现它。任何想法、建议或帮助将不胜感激，因为我不是专业人士，我们没有预算聘请一个人，但责任落在我身上，因为我是办公室里唯一有点网络知识的人。

Answer 1

鉴于它是响应式的，因此有理由认为它是强制 2 列的 css。我不能确定，因为我看不到代码，但我会用 css 媒体查询来做到这一点，当达到特定的屏幕宽度时，使列中的元素 100% 宽度。如果是这种情况，请尝试找到执行此操作的代码并将宽度设为 50%。

我不能保证在没有看到整个代码的情况下它会起作用，但这对你来说是一个开始。 php 不知道屏幕宽度。