wordpress 自定义_如何使用WordPress自定义徽标API

Love The Way You Lie 2022-12-03 09:47 289阅读 0赞

wordpress 自定义

WordPress users who aren’t necessarily developers can’t always customize their website the way they want. They can choose a theme from thousands that are available (both free and paid), but there’s often frustration that they can’t easily change the logo. Some themes provide options allowing their users to change the logo but it’s not always the case.

不一定是开发人员的WordPress用户不能总是按自己的方式自定义其网站。 他们可以从数千个可用主题(免费和付费)中选择一个主题，但是经常感到沮丧的是，他们无法轻松更改徽标。 某些主题提供了允许其用户更改徽标的选项，但并非总是如此。

To allow all users to change the logo of their website easily, the WordPress team decided to add a new feature in [WordPress 4.5][]: Custom Logo. Using this feature, any WordPress user will now be able to change their logo via the Theme Customizer.

为了允许所有用户轻松更改其网站的徽标，WordPress团队决定在[WordPress 4.5中][WordPress 4.5]添加一项新功能：自定义徽标。 使用此功能，任何WordPress用户现在都可以通过主题自定义程序更改其徽标。

If you’re a developer, you’ll want to know how to make use of the Custom Logo feature in your theme. The good news is that it’s not complicated, so you won’t have any excuse to not allow your user to customize their logo! In this article, we’ll look at how a user can change their logo with the Custom Logo feature. Then, we’ll cover how developers can enable the Custom Logo feature using the Custom Logo API.

如果您是开发人员，则需要了解如何在主题中使用“自定义徽标”功能。 好消息是它并不复杂，因此您不会有任何借口不允许用户自定义其徽标！ 在本文中，我们将研究用户如何使用“自定义徽标”功能更改其徽标。 然后，我们将介绍开发人员如何使用自定义徽标API启用自定义徽标功能。

## 自定义徽标 **(**Customizing a Logo**)** ##

From a user’s perspective, when the Custom Logo feature is enabled, changing the logo of a website is pretty easy. That was the aim of the feature after all.

从用户的角度来看，启用“自定义徽标”功能后，更改网站徽标非常简单。 这毕竟是该功能的目的。

The first thing to do is open the Theme Customizer. To do that, you can use the ‘Customize’ entry in the ‘Appearance’ menu in the WordPress dashboard. If you can’t see that entry, that means you don’t have the admin rights to the site to customize the theme (or you are using a very old version of WordPress and you should [update it][] as soon as possible!). You can also access the Customizer thanks to the ‘Customize’ link in the admin top bar on any page of your website.

首先要做的是打开主题定制器。 为此，您可以使用WordPress仪表板“外观”菜单中的“自定义”条目。 如果看不到该条目，则意味着您没有该站点的管理员权限以自定义主题(或者您使用的是WordPress的非常旧的版本，应该尽快对其进行[更新][update it] ！)。 您还可以通过网站任意页面管理顶部栏中的“自定义”链接来访问定制器。

![WordPress Theme Customizer][]

In the Customizer, go to the ‘Site Identity’ panel and you’ll find the ‘Logo’ section. If it’s the first time you’ve changed the logo, you’ll find a ‘Select logo’ button allowing you to select the logo you want to display on your website.

在定制程序中，转到“站点标识”面板，然后找到“徽标”部分。 如果这是您第一次更改徽标，则会发现一个“选择徽标”按钮，您可以选择要在网站上显示的徽标。

Hitting this button will open a media window. You can choose any existing image or you can upload a new one. Submit your choice with the ‘Choose logo’ button in the bottom right corner.

点击此按钮将打开一个媒体窗口。 您可以选择任何现有图像，也可以上传新图像。 使用右下角的“选择徽标”按钮提交选择。

Once a logo is chosen, the ‘Logo’ section displays it, above two buttons: one to remove the custom logo, and another to change it.

选择徽标后，“徽标”部分在两个按钮上方显示该徽标：一个用于删除自定义徽标，另一个用于更改它。

![WordPress Custom Logo API][]

The advantage of using the Theme Customizer is that you directly see the changes. In fact, right after choosing your logo you’ll see it on your website. You’re the only one who can see these changes, until you save them with the ‘Save & Publish’ button at the top of the Customizer.

使用主题定制器的优点是您可以直接看到更改。 实际上，选择徽标后，您会立即在网站上看到它。 您是唯一可以看到这些更改的人，直到使用Customizer顶部的“保存并发布”按钮保存它们为止。

## 使用自定义徽标API **(**Using the Custom Logo API**)** ##

You can test this feature with WordPress’ default themes, because they allow the use of Custom Logo. If you use another theme, you need this theme to explicitly enable the Custom Logo feature. We’ll now highlight how this can be achieved.

您可以使用WordPress的默认主题测试此功能，因为它们允许使用自定义徽标。 如果使用其他主题，则需要该主题来显式启用“自定义徽标”功能。 现在，我们将重点介绍如何实现这一目标。

### 启用自定义徽标功能 **(**Enabling the Custom Logo Feature**)** ###

To enable the Custom Logo feature, we actually need to declare support for it. There’s a good reason why this feature is not enabled by default. As we’ll see below, we have to use a specific function to display the Custom Logo. If we don’t use this function, the Custom Logo is not displayed, so it’s useless changing it.

要启用自定义徽标功能，我们实际上需要声明对此功能的支持。 有一个很好的理由说明默认情况下未启用此功能。 正如我们将在下面看到的，我们必须使用特定的功能来显示“自定义徽标”。 如果我们不使用此功能，则不会显示“自定义徽标”，因此更改它无用。

To declare support for the Custom Logo feature we use the `add_theme_support()` function. The best way to do this is by using a callback function and the `after_setup_theme` action. Put the following code in the `functions.php` file of your theme to declare the support for the Custom Logo feature.

要声明对“自定义徽标”功能的支持，我们使用`add_theme_support()`函数。 最好的方法是使用回调函数和`after_setup_theme`操作。 将以下代码放入主题的`functions.php`文件中，以声明对“自定义徽标”功能的支持。

function mytheme_setup() {
        add_theme_support('custom-logo');
    }
    
    add_action('after_setup_theme', 'mytheme_setup');

Now your users will be able to select a logo. The problem is that it’s not displayed yet. Before we look at how we display the custom logo, I’ll now walk through another useful parameter.

现在，您的用户将可以选择徽标。 问题是它尚未显示。 在介绍如何显示自定义徽标之前，我将逐步介绍另一个有用的参数。

### 选择徽标的大小 **(**Choosing the Size of the Logo**)** ###

A logo is part of the identity of a website. However, that doesn’t mean that as the theme’s developer, you can’t choose its size. I think it can be fairly important to do this, as a logo that is too big can break the entire theme design, which isn’t what we want.

徽标是网站标识的一部分。 但是，这并不意味着作为主题的开发人员，您不能选择其大小。 我认为这样做非常重要，因为太大的徽标会破坏整个主题设计，这不是我们想要的。

If you want to control the size of the Custom Logo, you first need to declare the size with `add_image_size()` which accepts three parameters: the name you want for this size, the width and the height. Then you indicate this size (with the name you chose) as a parameter in the Custom Logo support declaration.

如果要控制自定义徽标的大小，则首先需要使用`add_image_size()`声明大小，该参数接受三个参数：该大小的名称，宽度和高度。 然后，在“自定义徽标”支持声明中，将此尺寸(使用您选择的名称)作为参数来指示。

add_image_size('mytheme-logo', 160, 90);
    add_theme_support('custom-logo', array(
        'size' => 'mytheme-logo'
    ));

If the user chooses a smaller logo, then the logo won’t be resized. However, if an image’s dimensions are bigger than what is specified, whether that’s in height and/or width, then then it will be resized. In all cases, WordPress will preserve the original ratio when the image is resized.

如果用户选择较小的徽标，则徽标将不会调整大小。 但是，如果图像的尺寸大于指定的尺寸(无论是高度还是宽度)，则将调整其大小。 在所有情况下，调整图像大小时，WordPress都会保留原始比例。

So, the Custom Logo won’t be taller or wider than the area provided, but it can be smaller.

因此，“自定义徽标”不会比提供的区域高或宽，但可以更小。

### 显示自定义徽标 **(**Displaying the Custom Logo**)** ###

If you declare support for the Custom Logo feature, you’ll need to display the user’s selection. To do so, you can use the function `the_custom_logo()` anywhere you want to see the logo. It will automatically echo the right HTML code to display the logo: an image in the right size, encapsulated into a link redirecting to the homepage.

如果声明支持“自定义徽标”功能，则需要显示用户的选择。 为此，您可以在要查看徽标的任何位置使用函数`the_custom_logo()` 。 它将自动回显正确HTML代码以显示徽标：尺寸正确的图像，封装在重定向到首页的链接中。

If, for any reason you want to retrieve this code instead of just echoing it, you can also use `get_custom_logo()`. Note that, under the hood, `the_custom_logo()` calls `get_custom_logo()` to display the user’s logo.

如果出于某种原因想要检索此代码而不仅仅是回显代码，则也可以使用`get_custom_logo()` 。 请注意， `the_custom_logo()`在`the_custom_logo()`调用`get_custom_logo()`来显示用户的徽标。

Finally, a third function can help you in your theme: `has_custom_logo()`. As its name suggests, this function returns a boolean: `true` if a Custom Logo has been set, `false` otherwise.

最后，第三个功能可以帮助您实现主题： `has_custom_logo()` 。 顾名思义，此函数返回一个布尔值：如果设置了自定义徽标，则返回`true` ，否则返回`false` 。

In the following code we display the Custom Logo, if any. We detect the existence of a Custom Logo with `has_custom_logo()` and, if there’s no logo to show, we only display the site’s name.

在以下代码中，我们将显示“自定义徽标”(如果有)。 我们使用`has_custom_logo()`检测到自定义徽标的存在，并且如果没有要显示的徽标，则仅显示站点名称。

<?php
    // Display the Custom Logo
    the_custom_logo();
    
    // No Custom Logo, just display the site's name
    if (!has_custom_logo()) {
        ?>
        <h1><?php bloginfo('name'); ?></h1>
        <?php
    }
    ?>

Note that we don’t use `has_custom_logo()` before using `the_custom_logo()`. In fact, if there’s no logo to show, then `the_custom_logo()` will display an empty string so it’s useless to check the existence of a logo.

请注意，在使用`has_custom_logo()`之前，我们不使用`the_custom_logo()` 。 实际上，如果没有徽标显示，则`the_custom_logo()`将显示一个空字符串，因此检查徽标是否存在是没有用的。

Below is another way to do the same thing. We define a function (in the `functions.php` file for instance) that displays the Custom Logo or only the site’s name. This time, we use `function_exists()` to ensure our theme remains compatible with older versions of WordPress.

下面是执行相同操作的另一种方法。 我们定义了一个函数(例如，在`functions.php`文件中)，该`functions.php`显示“自定义徽标”或仅显示站点名称。 这次，我们使用`function_exists()`来确保我们的主题与WordPress的旧版本兼容。

function mytheme_custom_logo() {
        // Try to retrieve the Custom Logo
        $output = '';
        if (function_exists('get_custom_logo'))
            $output = get_custom_logo();
    
        // Nothing in the output: Custom Logo is not supported, or there is no selected logo
        // In both cases we display the site's name
        if (empty($output))
            $output = '<h1><a href="' . esc_url(home_url('/')) . '">' . get_bloginfo('name') . '</a></h1>';
    
        echo $output;
    }

Then we can call this function anywhere we want, for example in the header.

然后，我们可以在所需的任何地方调用此函数，例如在标头中。

## 综上所述 **(**In Summary**)** ##

As new versions of WordPress are released, the Theme Customizer becomes more and more useful for end users. Users can now personalize their website without needing to change the code of the theme.

随着新版本WordPress的发布，主题定制器对最终用户越来越有用。 用户现在可以个性化自己的网站，而无需更改主题代码。

Thanks to the new Custom Logo API, and the [Site Icon API][] we covered in a previous article, the end user can now more easily control the identity of their website, without needing custom development.

由于有了新的Custom Logo API和上一篇文章中介绍的[Site Icon API][] ，最终用户现在可以更轻松地控制其网站的身份，而无需进行自定义开发。

> 翻译自: [https://www.sitepoint.com/wordpress-custom-logo-api/][https_www.sitepoint.com_wordpress-custom-logo-api]

wordpress 自定义

[WordPress 4.5]: https://www.sitepoint.com/whats-new-wordpress-4-5/
[update it]: https://www.sitepoint.com/a-guide-to-updating-wordpress/
[WordPress Theme Customizer]: /images/20221123/9cf2d37b31584c21a49a6813dd7b174f.png
[WordPress Custom Logo API]: /images/20221123/ca5689b50e23488ab6f456c169792bf8.png
[Site Icon API]: https://www.sitepoint.com/all-you-need-to-know-about-the-new-wordpress-site-icon-api/
[https_www.sitepoint.com_wordpress-custom-logo-api]: https://www.sitepoint.com/wordpress-custom-logo-api/