12.6. Selector and Attribute Setting

Selector and attribute settings are used to retrieve information from the target page’s source code. In other words, with these settings, you tell the plugin what to retrieve from the target web page.

These settings are basically composed of at least two inputs which are selector and attribute, although some just have only selector input. Additionally, a Visual Inspector button and a button are available which are used to find CSS selectors visually and to test whether the entered CSS selectors and attributes can retrieve the information you want or not, respectively. A few settings of this type are shown in Fig. 12.23 through Fig. 12.29.

Note

Some of the settings also have an Options Box button . To learn how to use it, please refer to Options Box.

Selector

In this input, you should enter one or more CSS selectors. The CSS selector(s) will be used to locate one or more HTML elements available in the target web page’s source code.

Tip

If you want to enter more than one CSS selector, just put a , between the CSS selectors, such as #selector-1, .selector-2.

The plugin’s Visual Inspector tool is used to find CSS selectors just by clicking to elements in the target web page. However, you might need more complex CSS selectors to exactly match the elements you want. CSS selectors is a very broad topic and easy to learn. You can check out some written [1] [2] and video [3] tutorials on the Internet to learn more about them and how to use them.

Attribute (optional)

In this input, you should enter an attribute name of the HTML element(s) that the CSS selector, which is entered into selector input, matches.

For example, let’s consider the following img element:

<img src="source.jpg" title="An image" alt="The image element's alternative text">

This img element has 3 attributes which are src, title, and alt. These are the attributes you can enter into this input if the CSS selector entered into selector input matches this img element. There are many other HTML elements and attributes. You can just observe the HTML element, check out its attributes, and enter that into this input.

Note

You do not have to enter an attribute name into this input. This is optional. If you want to get the information stored in an attribute, you can enter that attribute’s name in this input to get that information.

The plugin also adds two more attributes. The first one is text. When you write text into this input, the text of the element is retrieved. The other one is html. When you write html, the outer HTML code of the element is retrieved.

The following video demonstrates an example usage of this type of a setting. The test results show what the plugin will retrieve from the target site by using your configuration.

Fig. 12.23 Category post URL selectors setting

Fig. 12.24 Custom attributes with selectors setting

Fig. 12.25 Custom content selectors for shortcodes setting

Fig. 12.26 Custom meta selectors setting

Fig. 12.27 Custom taxonomy value selectors setting

Fig. 12.28 Find and replace in element attributes setting

Fig. 12.29 Unnecessary element selectors setting

Footnotes

[1]	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

[2]	https://www.w3schools.com/cssref/css_selectors.asp

[3]	https://www.youtube.com/results?search_query=css+selector