< ul class = “wpp-list wpp-list-with-thumbnails”>
< li >
< a href=”https://test.site/” title=”thumbnail-title” target=”_self” class=”wpp-request-class-here”>< img src=”thumbnail-image” srcset=”https://test.site/image” width=”100″ height=”100″ alt=”wordpressfirst-aicache” class=”wpp-thumbnail wpp_featured wpp_cached_thumb” loading=”lazy” />< /a >
</ li >
</ ul >
-
This reply was modified 4 years, 5 months ago by
dreative.
Hi @dreative,
No need to wait for me to publish an update, WordPress Popular Posts allows you to change the HTML output of your popular posts list to whatever you need.
Try this:
1. Go to Widgets > [Your Sidebar] > WordPress Popular Posts.
2. Under “HTML Markup settings”, find and enable the “Use custom HTML Markup” checkbox and save changes.
3. Set “Before / after Popular Posts:” to <ul class="wpp-list wpp-list-with-thumbnails"> and </ul>, respectively.
4. Set “Post HTML Markup:” to:
<li>
<a href="{url}" title="{title_attr}" target="_self" class="wpp-post-image">{thumb_img}</a>
<a href="{url}" title="{title_attr}" class="wpp-post-title" target="_self"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{text_title}</font></font></a>
<span class="wpp-excerpt"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{excerpt}</font></font></span>
</li>
(Adjust where needed).
5. Finally, save changes.
Also, please use the CODE button when posting code here. Otherwise -as you already noticed- the WordPress forum will mangle your code 😛
Hi there,
You suggested
We also considered HTML custom markup.
However, it is permanently free for many users.
I thought I couldn’t provide a custom wpp.css.
I have identified a program for Output.
wordpress-popular-posts/src/Output.php
code 374
'img' => ( ! empty($post_thumbnail) ) ? '<a href="' . $permalink . '" ' . ($post_title_attr !== $post_title ? 'title="' . $post_title_attr . '" ' : '' ) . 'target="' . $this->admin_options['tools']['link']['target'] . '" class="wpp-post-image">' . $post_thumbnail . '</a>' : '',
code 407
? "<a href=\"{$permalink}\" " . ($post_title_attr !== $post_title ? "title=\"{$post_title_attr}\" " : "") . "target=\"{$this->admin_options['tools']['link']['target']}\" class=\"wpp-post-image\">{$post_thumbnail}</a>\n"
If you add a CSS class to these two lines of code,
More freedom in customizing wpp.css.
I think this is a valuable degree of freedom for many users.
You don’t spend a lot of time.
Just spend a little time adding code.
I hope my hope will come true.
thanks
regard.`
However, it is permanently free for many users.
HTML changes done this way are permanent, yes, they won’t be undone by plugin updates if that’s what you’re asking.
I thought I couldn’t provide a custom wpp.css.
Yes, you can.
I think this is a valuable degree of freedom for many users.
The plugin already provide ways to change the HTML code and its CSS code however you like, all without needing to edit plugin’s code directly. That’s plenty flexible in my opinion.
I may add a class to the link as requested, however there’s a low chance of that happening anytime soon since I’m busy with work and life at the moment. Hence the reason why I suggested using the Custom HTML feature instead.
Hi,
I thought it was a good suggestion,
I am sorry that it was not adopted.
Certainly as you say with custom HTML
Custom freedom is guaranteed, but
Requires a little knowledge of PHP.
My suggestion does not require knowledge of PHP code
It was a proposal to customize CSS.
If you have time to spare
I would be grateful if you would consider it again.
thanks
regards.
