【问题标题】:WordPress: Favicon not appearing on custom post types or child pagesWordPress:网站图标未出现在自定义帖子类型或子页面上
【发布时间】:2021-08-15 21:45:13
【问题描述】:

我在header.php 中有以下网站图标设置:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri()." /assets/build/favicon/apple-touch-icon.png "; ?>">
  <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-32x32.png "; ?>">
  <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-16x16.png "; ?>">
  <link rel="manifest" href="<?php echo get_template_directory_uri()." /assets/build/favicon/site.webmanifest "; ?>">
  <link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <?php wp_head(); ?>
</head>

我将所有网站图标文件存储在assets/build/favicon

/ 或父页面上,我的网站图标出现。但是在custom post types 或子页面上,我的图标没有出现。

文件路径正确(否则它们也不会显示在父页面上)。

为什么它不适用于自定义帖子类型页面或子页面?

index.php

get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>

<?php get_footer();

archive-knowledge.php:

<?php get_header(); ?>

<body class="knowledgeListing">
  <?php get_template_part('templates/parts/knowledge/level-one/listing'); ?>
  <?php get_footer(); ?>
</body>

【问题讨论】:

  • 您是否真的在自定义帖子类型和子页面模板中调用了header.php 文件?有时很容易忘记!
  • 嗨@Ruvee - 我可以确认我的自定义帖子类型正在使用get_header()。我的所有页面都使用get_header()(通过index.php),但它没有解释为什么在父页面上显示图标图标,但在子页面上没有?
  • 在自定义帖子类型页面上,您没有看到任何来自 header.php 的代码显示在源代码中?你使用主题生成器或类似的东西吗?还是购买带有自定义选项的主题?
  • @Freddy 我只是想知道您是否知道 WordPress 4.3+ 中的 site icon feature?如果是这样,你为什么不直接使用它?还是您已经尝试过并且发生了同样的问题?我们可以看看你的index.php 模板吗?您是否对所有页面(单个页面、帖子、CPT、类别等)使用单个 index.php 文件?
  • 嗨@SallyCJ - 是的,我知道通过customizer 的favicon 选项。通过此处上传站点图标对我来说产生了相同的结果,该图标只会显示在顶级页面(而不是子页面)上,并且不会出现在 custom post types 上。我更新了我的问题以展示index.phparchive-knowledge.php,这是我的custom post types 之一。

标签: php wordpress wordpress-theming


【解决方案1】:

我不知道为什么,但有时 Chrome 不会像其他浏览器一样显示网站图标。尝试在你的头文件中添加 favicon.ico,就像你对其他人所做的那样:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

并将您的 favicon.ico 文件放在根目录中。因此,如果浏览器由于某种原因无法识别/获取图标,它们将在您的根文件夹中采用默认的favicon.ico。这样所有浏览器最终都会找到图标

【讨论】:

    【解决方案2】:

    我正在检查您的 href URL 的主要问题,您可以这样使用:

    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-60x60.png">
      <link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-72x72.png">
      <link rel="apple-touch-icon" sizes="76x76" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-114x114.png">
      <link rel="apple-touch-icon" sizes="120x120" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-120x120.png">
      <link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-144x144.png">
      <link rel="apple-touch-icon" sizes="152x152" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-152x152.png">
      <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-180x180.png">
      <link rel="icon" type="image/png" sizes="192x192" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/android-icon-192x192.png">
      <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="96x96" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-96x96.png">
      <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
      <link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/manifest.json">
      <meta name="msapplication-TileColor" content="#ffffff">
      <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri();?>/assets/build/favicon/ms-icon-144x144.png">
      <meta name="theme-color" content="#ffffff">
      <?php wp_head(); ?>
    </head>
    

    如果你遵循这种结构,所有的浏览器/设备都会支持它。

    您还可以通过以下方式生成在线网站图标: https://www.favicon-generator.org/

    【讨论】:

      【解决方案3】:

      您的问题是在错误的位置关闭 php 标签,wp 不应在网站的任何部分显示它们。

      看看这是你脑子里的url,它是php标签在错误的地方关闭"; ?&gt;"

      <link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
      

      正确的网址应该是这样的:

      <link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
      

      我更正了您问题中给出的其他网址

      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
        <link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/site.webmanifest">
        <link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <?php wp_head(); ?>
      </head>
      

      【讨论】:

        猜你喜欢
        • 2012-11-11
        • 2019-01-03
        • 1970-01-01
        • 2021-06-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-01-03
        • 2019-02-23
        相关资源
        最近更新 更多