WordPress定制主题上的Jumbotron动态图像

时间:2018-10-10 作者:Andy_G

通过WordPress自定义程序使您的jumbotron图像动态(用户可更改)的正确过程是什么。目前在我的客户自定义主题www.windupgram上。我使用的是静态图像,需要时必须更改。

我想给客户一个选项,让他们可以随时更改图像。

非常感谢

安迪

3 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

您可以添加对内置自定义标题功能的支持:

https://developer.wordpress.org/themes/functionality/custom-headers/

或者使用自定义API将您自己的控件添加到自定义程序中,以选择图像:

https://developer.wordpress.org/themes/customize-api/

自定义标题功能基本上只是使用自定义API添加控件的快捷方式,但您对字段名称等的控制较少。

SO网友:Noobie

您可以使用高级自定义字段插件,然后将字段回调到静态图像。如果您是ACF插件新手,请在此处阅读他们的文档https://www.advancedcustomfields.com/resources/

最重要的是查看位置框。位置框允许您创建一组规则,这些规则决定何时何地将这些字段添加到编辑屏幕/帖子对象。在此处查看更多信息https://www.advancedcustomfields.com/resources/creating-a-field-group/

例如,图像字段为

<?php the_field(\'yourimage\'); ?>
您的代码应如下所示:

<div class="jumbotron">
   <img src="<?php the_field(\'yourimage\'); ?>" class="img-fluid" alt="Responsive image">
</div>
那么您就不需要静态的jumbotron图像了。

SO网友:Andy_G

使用自定义API对我很有用。我在名为inc的新文件夹中创建了一个名为customize的新文件。php

在该文件中,我添加了以下代码:

    <?php
 function gramophone_customize_register($wp_customize){

    // Showcase Section
    $wp_customize->add_section(\'showcase\', array(
        \'title\'          => __(\'Showcase\', \'gramophone\'),
        \'description\'    => sprintf( __(\'Options for showcase area\', \'gramophone\')
        ),
        \'priority\'       => 130,
    ));

    // Image Setting
      $wp_customize->add_setting(\'showcase_image\', array(
        \'default\' => get_bloginfo(\'template_directory\') . \'img/Gramophonebannernew2.jpg\',
        \'type\'    => \'theme_mod\'

     ));

     // Image Control
     $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, \'showcase_image\', array(
         \'label\'    => __(\'Background Image\', \'gramophone\'),
         \'section\'  => \'showcase\',
         \'settings\' => \'showcase_image\',
         \'priority\' => 1,
     )));

}

   add_action(\'customize_register\',\'gramophone_customize_register\');
然后在我的函数中。php我添加了此代码

   require get_template_directory(). \'/inc/customizer.php\';
我的in标题。php我为jumbotron添加了样式

  <style>
    .jumbotron{

          margin: 0;

      }
    .showcase{
              background:url(<?php echo get_theme_mod(\'showcase_image\', get_bloginfo(\'template_url\').\'/img/Gramophonebannernew2.jpg\'); ?>) no-repeat center center;
              background-size: cover;
              height: 100vh;
          }

  </style>
最后在我的jumbotron中添加了showcase类

       <div class="jumbotron showcase">

   </div>
现在,当我进入定制器时,我可以将图像更改为我想要的任何图像。如果未选择图像,则将默认图像放置在自定义程序中。将使用php。

结束

相关推荐

Wp-Content/Themes/文件夹中的index.php文件

今晚,当我注意到一个索引时,我正在手动将我正在处理的主题上传到我的wordpress安装中。我的主题文件夹中的php文件。我打开了文件,其中只包含以下三行代码:<?php //silence is golden ?> 这让我很担心,起初我想可能是我不小心把文件上传到了主题目录,但文件的内容并不是我想放的任何东西。所以我的意思是,应该有一个索引。我的wp内容/主题/目录中的php文件?还是有人把它放在那里了。或现在我想起来了,可能是我无意中上传了这个文件,然后一个“黑