使用自定义字段动态生成导航图

时间:2015-06-17 作者:Nia Skywalk

我正在尝试动态生成导航图(见http://zinderlaw.indigo-grove.com) 它使用页面上的自定义字段来填充imagemap的href标记。

我不确定我应该在这里或StackOverflow,但这是一个WordPress主题,所以我认为这将是最合适的。如果我错了,请告诉我。

最近,我获得了一个临时客户端,它看似简单的HTML设计揭示了一个恶魔般的扭曲,这对我的WordPress主题造成了巨大破坏。三种图形导航,其imagemap链接内容几乎在每个页面上都会发生变化。

暂时,我使用增强的文本小部件和小部件逻辑插件操纵它们,这些插件允许我将代码放在侧栏小部件中,并在特定页面上显示它们。然而,即使看似重复的事情实际上也没有重复,因此需要找到新的解决方案。

我决定在每个页面上使用自定义字段,以便将来的用户可以轻松地进行更改。我最初的试验似乎奏效了,但我在实施上遇到了困难。

我尝试了几种方法来添加图形和图像地图。这三种图形的坐标相差很大,所以我认为数组的效果最好。我想我可以为href创建一个占位符变量数组,该变量将从页面中获取。最初,在我添加了另外两个集合之前,它似乎是有效的,然后它开始给出错误,因为graphic1有12个字段,而graphic2和graphic3各有6个字段。

我对编程基本上还是新手。我觉得我已经接近解决方案了,但我已经没有时间了。我希望这里有人能帮忙。

下面是我添加到函数中的内容。php:

// Create function for the custom-fields
function zlthemeAddNavDiag($graphic, $zlthemeGraphicSlots) {
    // create fields for Navigation Diagram / Navigation Graphic
    class zlthemeNavGraphic {
        public $navDiagram;
        public $navLocations;
    }
    $homePageDiag = new zlthemeNavGraphic();
    $homePageDiag->navDiagram = 1;
    $homePageDiag->navLocations = array(
        \'<area shape="poly" coords="301,117,191,40,203,24,313,100" href="\'.$zlthemeGraphicSlots[0].\'" alt="Not-For-Profit" />\',
        \'<area shape="poly" coords="321,129,338,137,288,292,266,286" href="\'.$zlthemeGraphicSlots[1].\'" alt="Corporate Compliance" />\',
        \'<area shape="poly" coords="94,294,263,294,264,312,94,313" href="\'.$zlthemeGraphicSlots[2].\'" alt="Corporate Counsel" />\',
        \'<area shape="poly" coords="11,130,27,126,87,294,68,300" href="\'.$zlthemeGraphicSlots[3].\'" alt="Information Technology" />\',
        \'<area shape="poly" coords="48,95,139,32,148,48,60,111" href="\'.$zlthemeGraphicSlots[4].\'" alt="Healthcare" />\',
        \'<area shape="rect" coords="129,122,226,166" href="\'.$zlthemeGraphicSlots[5].\'" alt="Our Clients" />\',
        \'<area shape="poly" coords="190,60,282,124,274,137,185,72" href="\'.$zlthemeGraphicSlots[6].\'" alt="Crisis Response" />\',
        \'<area shape="poly" coords="285,145,298,150,261,268,244,260" href="\'.$zlthemeGraphicSlots[7].\'" alt="Regulatory Affairs" />\', 
        \'<area shape="poly" coords="109,262,241,262,242,282,108,280" href="\'.$zlthemeGraphicSlots[8].\'" alt="Governance" />\',
        \'<area shape="poly" coords="67,154,105,246,88,253,55,160" href="\'.$zlthemeGraphicSlots[9].\'" alt="Operations" />\',
        \'<area shape="poly" coords="59,128,170,53,179,69,67,147" href="\'.$zlthemeGraphicSlots[10].\'" alt="Contracts" />\',
        \'<area shape="rect" coords="117,181,243,223" href="\'.$zlthemeGraphicSlots[11].\'" alt="Client Challenges" />\'
    );
    $clientChallengesDiag = new zlthemeNavGraphic();
    $clientChallengesDiag->navDiagram = 2;
    $clientChallengesDiag->navLocations = array(
        \'<area shape="poly" coords="181,19,300,100,293,118,175,34" href="\'.$zlthemeGraphicSlots[0].\'" alt="Crisis Response" />\',
        \'<area shape="poly" coords="297,123,316,130,268,276,250,269" href="\'.$zlthemeGraphicSlots[1].\'" alt="Regulatory Affairs" />\',
        \'<area shape="poly" coords="91,274,251,274,254,291,91,292" href="\'.$zlthemeGraphicSlots[2].\'" alt="Governance" />\',
        \'<area shape="poly" coords="29,123,85,280,66,287,9,132" href="\'.$zlthemeGraphicSlots[3].\'" alt="Operations" />\',
        \'<area shape="poly" coords="20,107,153,19,168,27,28,120" href="\'.$zlthemeGraphicSlots[4].\'" alt="Contracts" />\',
        \'<area shape="rect" coords="82,124,254,178" href="\'.$zlthemeGraphicSlots[5].\'" alt="Client Challenges" />\'
    );
    $ourClientsDiag = new zlthemeNavGraphic();
    $ourClientsDiag->navDiagram = 3;
    $ourClientsDiag->navLocations = array(
        \'<area shape="poly" coords="191,24,292,100,286,115,178,41" href="\'.$zlthemeGraphicSlots[0].\'" alt="Not-For-Profit" />\',
        \'<area shape="poly" coords="295,125,317,135,269,277,250,270"href="\'.$zlthemeGraphicSlots[1].\'" alt="Corporate Compliance" />\',
        \'<area shape="poly" coords="78,277,246,276,246,296,78,295"href="\'.$zlthemeGraphicSlots[2].\'" alt="Corporate Counsel" />\',
        \'<area shape="poly" coords="31,133,79,271,64,277,11,130"href="\'.$zlthemeGraphicSlots[3].\'" alt="Information Technology" />\',
        \'<area shape="poly" coords="19,109,157,16,164,33,26,126"href="\'.$zlthemeGraphicSlots[4].\'" alt="Healthcare" />\',
        \'<area shape="rect" coords="98,124,233,187"href="\'.$zlthemeGraphicSlots[5].\'" alt="Our Clients" />\'
    );
    $navGraphicList = array($homePageDiag, $clientChallengesDiag, $ourClientsDiag);
    switch($graphic[0]) {
        case 1:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        case 2:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        case 3:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        default:
            alert("No setting!");
    };
    foreach($navGraphicList as $list) {
        if($list->navDiagram === $graphic){
            print_r(array_values($list->navLocations));
        };
    };
}
在每个测试页面上,我添加以下代码:

$zlthemeGraphicNav = get_post_custom();
echo \'<p>The array count is: \' . count($zlthemeGraphicNav) . \'</p>\';

if(count($zlthemeGraphicNav)>=6) {
    $zlthemeChooseGraphic = $zlthemeGraphicNav[\'nav-graphic\'];
    $zlthemeGraphicSlots = $zlthemeGraphicNav[\'slot\'];

    zlthemeAddNavDiag($zlthemeChooseGraphic, $zlthemeGraphicSlots);
}
如果我不添加if 语句,它会显示在所有页面上,即使我尝试使用代码表示它不是主页。然而,与其他人相比,这是微不足道的。

我已经做了很多小的调整来达到这一步,我觉得我即将彻底打破一切。

以下是问题:

它尝试在所有字段中填写变量,但并非所有字段都存在return 和echoprint_r, 但在我删除了超长的homePageGraphiclocation数组之后,它就显得空白了我应该将阵列隐藏在其他地方吗?我可以将第一个图形和数组硬编码到主页或使用原始小部件,因为它只在一个或两个页面上,但是如果可能的话,我希望能够动态使用它。

我觉得我错过了一些非常简单的东西。请帮忙。

开发人员网站位于以下位置:http://zinderlaw.indigo-grove.com 因此,您可以看到它应该输出什么。

1 个回复
最合适的回答,由SO网友:Nia Skywalk 整理而成

啊,我发现有几个地方出了问题。

首先,在switch语句中,当我试图使用echo, 我使用的是括号,它一次性工作正常,但显然会导致函数出错(?)。感谢编辑我第一个代码的人!我不会看到的。

所以当我改变这一点时:

switch($graphic[0]) {
        case 1:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        case 2:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        case 3:
            return (\'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />\');
            break;
        default:
            alert("No setting!");
    };
对此:

switch($graphic[0]) {
    case 1:
        echo \'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />\';
        break;
    case 2:
        echo \'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />\';
        break;
    case 3:
        echo \'<img src="\'.get_template_directory_uri().\'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />\';
        break;                  
    default:
        echo "No setting!";
};
正如我所期待的那样。

此外,我意识到,当我试图在此处使用数组位置来比较数字时,我忘记了将数组位置添加到$图形字符串中,而且我使用了三个相等值,而不是两个相等值:

foreach($navGraphicList as $list) {
    if($list->navDiagram === $graphic){
        print_r(array_values($list->navLocations));
    };
};
因此,将其更改为:

foreach($navGraphicList as $list) {
    if($list->navDiagram == $graphic[0]){
        var_dump($list->navLocations);
    };
};
允许我实际调用正确的值。

找到答案后,我能够快速完成所需的代码:

foreach($navGraphicList as $list) {
    if ($list->navDiagram == $graphic[0]){
        echo \'<map name="Gui">\';
        foreach($list->navLocations as $map){
            echo $map;
        };
        echo \'</map>\';
    };
};
虽然我自己找到了这些解决方案,但我仍然无法找到一个很好的答案来回答我的相关问题,即如何在不在每个页面上添加额外代码或值的情况下添加更长的数组。目前,此阵列将是两个深度,而不是三个深度。如果有人能提出任何意见,我将不胜感激。

结束

相关推荐

前端出现CALL_USER_FUNC_ARRAY()错误

我已经阅读了其他关于这个问题的帖子,但我的帖子在一个根本上不同。。。错误中没有定义函数。它是这样写的:警告:call\\u user\\u func\\u array()要求参数1为有效回调,在/home/ovbar/public\\u html/wp includes/plugin中找不到函数“”,或者函数名无效。php在线496在没有定义函数的情况下,我从来没有看到过这个错误,所以我不知所措。我用All-in-One WP Migration 插件。有什么想法吗?以下是我迄今为止所做的:我已经检查了硬