Question

我想在网站标题的左侧添加一个图片：mysimpledevotion.com
我怎么能这样做？
是否更容易制作文本和图片的图像，而不是试图在文本旁边添加一个小图片（图标）？我不是在谈论图标，而是首页上的网站标题“我简单的设备”。

Answer 1

这称为favicon，可以添加，如果您使用的主题包含该选项，则可以通过wordpress管理中的主题选项进行检查（请在左侧查看）。如果它不在那里，那么检查外观＆gt;＆gt;定制

即使你找不到那么检查主题文档。尝试避免添加任何其他代码，它可能与现有代码冲突。

即使它不在主题文档中，也请按照以下步骤添加

转到外观＆gt;＆gt;编辑
点击header.php
在<head></head>

<link rel="shortcut icon" type="image/x-icon" href="your-image-link" />

Answer 2

我找到了实现这一目标的两种选择。

1。使用CSS before注入图像

这种方法的主要问题是您不能使用相对路径。也就是说，图片网址必须是绝对的，否则它将无法在网站的所有页面上一致地工作。

为此，请将以下CSS添加到主题的“其他CSS”部分（自定义时），或将其添加到自定义子主题的style.css中（并确保添加style.css正确使用functions.php。

.site-title a:before{
  content:"";
  background-image:url('http://path/to/my/image.jpg');
  display: inline-block;
  background-size: 1em 1em; 
  width: 1em; 
  height: 1em;
}

这也将使图像也与文本大小相对应，并且您可以添加其他CSS属性，例如border-radius: 50%。

2。使用主题的过滤器注入图片

这种方法在很大程度上依赖于所使用的主题来定义适当的过滤器，您可以在其中插入图像HTML。这是使用自定义子主题将图像注入Astra主题的示例。

functions.php：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

if( ! ( function_exists( 'wp_get_attachment_by_post_name' ) ) ) {
    function wp_get_attachment_by_post_name( $post_name ) {
        $args           = array(
            'posts_per_page' => 1,
            'post_type'      => 'attachment',
            'post_mime_type' => 'image',
            'name'           => trim( $post_name ),
        );

        $get_attachment = new WP_Query( $args );

        if ( ! $get_attachment || ! isset( $get_attachment->posts, $get_attachment->posts[0] ) ) {
            return false;
        }

        return $get_attachment->posts[0]->guid;
    }
}

add_filter( 'astra_site_title', 'add_image_to_site_title' );
function add_image_to_site_title( $original_title ) {   
    $image = wp_get_attachment_by_post_name( 'my-image-post-name' );
    $html = '<img src="' . $image . '" alt="" class="title-image">';
    return $html . $original_title;
}
?>

style.css：

/*
 Theme Name:   My Astra
 Template:     astra
*/

.title-image {
    display: inline-block;
    width: 1em; 
    height: 1em;
}

我希望这会有所帮助：）

在Wordpress网站的网站标题旁边添加图片

2 个答案: