使用WP Web刮刀与WordPress

Question

我试图在我的网站www.eastwickpark.co.uk中使用带有WP的WP Web Scraper插件来获取其他网站上的练习的在线评级

https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice

我使用了此代码段

<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>

然后我在主题样式表编辑器中使用自定义CSS

.btn.blue,
div .btn.blue {
    font-size: 16px;
    padding: 8px 16px;
}

/*** Stars ***/
.sprite-icons.star-blue-outline {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.star-blue-fill {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.star-blue-half {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.caret-white {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
    width: 10px;
    height: 14px;
}

我的CSS问题在于按钮＆＃34;包裹＆＃34;。

试图获得针对该课程的星级评分＆＃34; raty-rating-wrapper-readonly＆＃34;但是我得到了一大堆垂直恒星。

即。如果我使用

[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]

我得到一个完整的5 *图像垂直列表？

如果我像这样使用image-middle div

[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]

我的按钮上有一个奇怪的包裹。

无法解决这个问题，不得不承认我不是CSS大师。我们将非常感激地收到任何见解。

Answer 1

  

我的CSS问题在于按钮＆＃34;包裹＆＃34;

包装行为的原因是由WordPress动态生成的<br>标记。您可以按照此处的指南修复它：Stop WordPress automatically adding <br> tags to post content

以上帖子对您有利，因为它还会删除动态生成的<p>标记。我只浏览了你的代码，发现了很多不需要的p标签。

  

无法解决这个问题，不得不承认我不是CSS大师。任何   我们将非常感激地接受见解。

由于您暗示了CSS解决方案，因此一个简单的解决方法是使用#widgets .textwidget br { display: none; }隐藏br标记。或者#widgets .textwidget a { display: inline-flex; align-items: center }修复空间并对齐箭头图像，因为内部忽略了br标记，并且flex的初始方向为row。

解包按钮：