I have a WordPress website, and I need to extract into a PHP plugin the header tag from this website, and format the code like this:
<style>
Code stylization grouped if needed on the header here
</style>
<header>
Header extracted from WordPress
</header>
<script>
Scripts grouped if needed on the header here
</script>
I already did something interesting, but I’m having trouble loading two dropdown lists with options from the html (HOTELS and LANG).
Here is a sample HTML code from a random page:
<header class="fusion-header-wrapper">
<div class="fusion-header-v5 fusion-logo-alignment fusion-logo-center fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">
<div class="fusion-secondary-header">
<div class="fusion-row">
<div class="fusion-alignleft">
<div class="fusion-contact-info">
<span class="fusion-contact-info-phone-number">(+351) 300 528 059</span>
<span class="fusion-header-separator">|</span>
<span class="fusion-contact-info-email-address">
<a href="mailto:reservas@turimhoteis.com">re ser vas @tu rimho te is.c om</a>
</span>
</div>
</div>
</div>
</div>
<div class="fusion-header-sticky-height"></div>
<div class="fusion-sticky-header-wrapper">
<!-- start fusion sticky header wrapper -->
<div class="fusion-header">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="31px" data-margin-bottom="31px" data-margin-left="0px" data-margin-right="0px">
<a class="fusion-logo-link" href="https://my-site.com/">
<!-- standard logo -->
<img src="https://my-site.com/Logo.png" srcset="https://my-site.com/Logo.png 1x" width="308" height="105" alt="Book your stay on the Hotels official website! Logo" data-retina_logo_url="" class="fusion-standard-logo"/>
</a>
</div>
<div class="fusion-mobile-menu-icons">
<a href="#" class="fusion-icon awb-icon-bars" aria-label="Toggle mobile menu" aria-expanded="false"></a>
</div>
</div>
</div>
<div class="fusion-secondary-main-menu">
<div class="fusion-row">
<nav class="fusion-main-menu" aria-label="Main Menu">
<div class="fusion-overlay-search">
<form role="search" class="searchform fusion-search-form fusion-search-form-clean" method="get" action="https://my-site.com">
<div class="fusion-search-form-content">
<div class="fusion-search-field search-field">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" value="" name="s" class="s" placeholder="Search..." required aria-required="true" aria-label="Search..."/>
</label>
</div>
<div class="fusion-search-button search-button">
<input type="submit" class="fusion-search-submit searchsubmit" aria-label="Search" value=""/>
</div>
</div>
</form>
<div class="fusion-search-spacer"></div>
<a href="#" role="button" aria-label="Close Search" class="fusion-close-search"></a>
</div>
<ul id="menu-main-menu" class="fusion-menu">
<li id="menu-item-3946" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3946 fusion-dropdown-menu" data-item-id="3946">
<a href="#" class="fusion-bottombar-highlight">
<span class="menu-text">HOTELS</span>
<span class="fusion-caret">
<i class="fusion-dropdown-indicator" aria-hidden="true"></i>
</span>
</a>
<ul class="sub-menu">
<li id="menu-item-3947" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3947 fusion-dropdown-submenu">
<a href="#" class="fusion-bottombar-highlight">
<span>HOTEL-01</span>
<span class="fusion-caret">
<i class="fusion-dropdown-indicator" aria-hidden="true"></i>
</span>
</a>
<ul class="sub-menu">
<li id="menu-item-4037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4037">
<a href="https://my-site.com/hotel01" class="fusion-bottombar-highlight">
<span>hotel01</span>
</a>
</li>
<li id="menu-item-4035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4035">
<a href="https://my-site.com/hotel02" class="fusion-bottombar-highlight">
<span>hotel02</span>
</a>
</li>
<li id="menu-item-4782" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4782">
<a href="https://my-site.com/hotel03" class="fusion-bottombar-highlight fusion-has-highlight-label">
<span>hotel03</span>
</a>
</li>
</ul>
</li>
<li id="menu-item-3962" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3962 fusion-dropdown-submenu">
<a href="#" class="fusion-bottombar-highlight">
<span>HOTEL-02</span>
<span class="fusion-caret">
<i class="fusion-dropdown-indicator" aria-hidden="true"></i>
</span>
</a>
<ul class="sub-menu">
<li id="menu-item-4031" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4031">
<a href="https://my-site.com/hotel01" class="fusion-bottombar-highlight">
<span>hotel01</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-26285" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26285" data-item-id="26285">
<a href="https://bookings.turim-hotels.com/pt/bookcore/loyalty/account" class="fusion-bottombar-highlight">
<span class="menu-text">CLUB</span>
</a>
</li>
<li id="menu-item-6094" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6094" data-item-id="6094">
<a href="https://turim-hotels.com/en/events-en/" class="fusion-bottombar-highlight">
<span class="menu-text">EVENTS</span>
</a>
</li>
<li id="menu-item-6095" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6095" data-item-id="6095">
<a href="https://turim-hotels.com/en/corporate-en/" class="fusion-bottombar-highlight">
<span class="menu-text">CORPORATE</span>
</a>
</li>
<li id="menu-item-19578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19578" data-item-id="19578">
<a href="https://turim-hotels.com/en/trade/" class="fusion-bottombar-highlight">
<span class="menu-text">TRADE</span>
</a>
</li>
<li id="menu-item-6093" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6093" data-item-id="6093">
<a href="https://turim-hotels.com/en/news-en/" class="fusion-bottombar-highlight">
<span class="menu-text">NEWS</span>
</a>
</li>
<li id="menu-item-6092" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6092" data-item-id="6092">
<a href="https://turim-hotels.com/en/promotions-en/" class="fusion-bottombar-highlight">
<span class="menu-text">PROMOTIONS</span>
</a>
</li>
<li id="menu-item-6091" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6091" data-item-id="6091">
<a href="https://turim-hotels.com/en/careers-en/" class="fusion-bottombar-highlight">
<span class="menu-text">CAREERS</span>
</a>
</li>
<li id="menu-item-6096" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6096" data-item-id="6096">
<a href="https://turim-hotels.com/en/contacts-en/" class="fusion-bottombar-highlight">
<span class="menu-text">CONTACTS</span>
</a>
</li>
<li id="menu-item-3987" class="pll-parent-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3987 fusion-dropdown-menu" data-classes="pll-parent-menu-item" data-item-id="3987">
<a href="#pll_switcher" class="fusion-bottombar-highlight">
<span class="menu-text">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAt1BMVEWSmb66z+18msdig8La3u+tYX9IaLc7W7BagbmcUW+kqMr/q6n+//+hsNv/lIr/jIGMnNLJyOP9/fyQttT/wb3/////aWn+YWF5kNT0oqz0i4ueqtIZNJjhvt/8gn//WVr/6+rN1+o9RKZwgcMPJpX/VFT9UEn+RUX8Ozv2Ly+FGzdYZrfU1e/8LS/lQkG/mbVUX60AE231hHtcdMb0mp3qYFTFwNu3w9prcqSURGNDaaIUMX5FNW5wYt7AAAAAjklEQVR4AR3HNUJEMQCGwf+L8RR36ajR+1+CEuvRdd8kK9MNAiRQNgJmVDAt1yM6kSzYVJUsPNssAk5N7ZFKjVNFAY4co6TAOI+kyQm+LFUEBEKKzuWUNB7rSH/rSnvOulOGk+QlXTBqMIrfYX4tSe2nP3iRa/KNK7uTmWJ5a9+erZ3d+18od4ytiZdvZyuKWy8o3UpTVAAAAABJRU5ErkJggg==" alt="" width="16" height="11" style="width: 16px; height: 11px;"/>
<span style="margin-left:0.3em;">English</span>
</span>
<span class="fusion-caret">
<i class="fusion-dropdown-indicator" aria-hidden="true"></i>
</span>
</a>
<ul class="sub-menu">
<li id="menu-item-3987-pt" class="lang-item lang-item-15 lang-item-pt lang-item-first menu-item menu-item-type-custom menu-item-object-custom menu-item-3987-pt fusion-dropdown-submenu" data-classes="lang-item">
<a href="https://my-site.com/" class="fusion-bottombar-highlight" hreflang="pt-PT" lang="pt-PT">
<span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABL0lEQVR4AV2RA2yEQRCFNxcnRVw3qG3bthXUbZxaUaOGRVA7ro2wDWoEtW2b9/b2nHx3v943uztDSAwhAQJ86P83keCJw2HcEAJoqLivmJHbnQt+s7OFfMXHMz5DAgBPCKBCUktSRmdK43Dw3Gz451TIc68nPr+7uLzZWr2Zm78bGLxpa797e1+IC0erUeAmL+ol3R8CEE+/qqvDv2BbwjYi6yJR+6Ys5m5zA0C7HbWEIEy/KCpKC8uzQRf5fkivX3zBZIIw/Swvj8cTKthRIbDGDwcYnXRF7avy/KM5q8NZg2cDPWEaYHt8AceFACBsTdui9nmn8VWmpngawN+ngiEVHCocGM5Vpu8G0rUB5iAS0CKAYwCsg/YB1lPWKESBSCAqhMiKwHQueJwI2BeDC83C2lDIxUCuAAAAAElFTkSuQmCC" alt="" width="16" height="11" style="width: 16px; height: 11px;"/>
<span style="margin-left:0.3em;">Português</span>
</span>
</a>
</li>
<li id="menu-item-3987-es" class="lang-item lang-item-445 lang-item-es menu-item menu-item-type-custom menu-item-object-custom menu-item-3987-es fusion-dropdown-submenu" data-classes="lang-item">
<a href="https://my-site.com/es" class="fusion-bottombar-highlight" hreflang="es-ES" lang="es-ES">
<span>
<img loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAflBMVEX/AAD9AAD3AADxAADrAAD/eXn9bGz8YWH8WVn6UVH5SEj5Pz/3NDT0Kir9/QD+/nL+/lT18lDt4Uf6+j/39zD39yf19R3n5wDxflXsZ1Pt4Y3x8zr0wbLs1NXz8xPj4wD37t3jmkvsUU/Bz6nrykm3vJ72IiL0FBTyDAvhAABEt4UZAAAAX0lEQVR4AQXBQUrFQBBAwXqTDkYE94Jb73+qfwVRcYxVQRBRToiUfoaVpGTrtdS9SO0Z9FR9lVy/g5c99+dKl30N5uxPuviexXEc9/msC7TOkd4kHu/Dlh4itCJ8AP4B0w4Qwmm7CFQAAAAASUVORK5CYII=" alt="" width="16" height="11" style="width: 16px; height: 11px;"/>
<span style="margin-left:0.3em;">Español</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="fusion-mobile-nav-holder fusion-mobile-menu-text-align-left fusion-mobile-menu-indicator-hide" aria-label="Main Menu Mobile"></nav>
</div>
</div>
</div>
<!-- end fusion sticky header wrapper -->
</div>
<div class="fusion-clearfix"></div>
</header>
And my plugin so far:
<?php
add_action('rest_api_init', function () {
register_rest_route('plugin/v1', '/json', [
'methods' => 'GET',
'callback' => 'page_json',
'permission_callback' => '__return_true',
'args' => [
'lang' => [
'sanitize_callback' => 'sanitize_text_field',
'default' => 'pt',
],
],
]);
});
function get_lang_url($lang) {
$urls = array(
'pt' => 'ptUrlPlaceholder',
'en' => 'enUrlPlaceholder',
'es' => 'esUrlPlaceholder'
);
return $urls[$lang];
}
function resolve_url($base, $relative) {
if (parse_url($relative, PHP_URL_SCHEME)) return $relative;
$base = rtrim($base, '/');
return $base . '/' . ltrim($relative, '/');
}
function css_fix_urls($css, $baseUrl) {
return preg_replace_callback(
'/url((["']?)(?!data:|https?:|//)([^"')]+)1)/i',
function($m) use ($baseUrl) {
$path = resolve_url($baseUrl, $m[2]);
return "url('{$path}')";
},
$css
);
}
function get_clean_dom($url) {
$response = wp_remote_get($url);
if (is_wp_error($response)) {
return new WP_Error('fetch_error', 'Erro ao acessar o site externo', ['status' => 500]);
}
$html = wp_remote_retrieve_body($response);
if (empty($html)) {
return new WP_Error('empty_html', 'Conteúdo vazio recebido do site externo', ['status' => 500]);
}
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
return $dom;
}
function inject_style($dom, $headerNode, $styleBlock) {
if (!$headerNode) return;
if ($styleBlock) {
$frag = $dom->createDocumentFragment();
$frag->appendXML($styleBlock);
$headerNode->insertBefore($frag, $headerNode->firstChild);
}
}
function remove_links_and_scripts($dom, $node) {
$xpath = new DOMXPath($dom);
foreach ($xpath->query('.//link[@rel="stylesheet"]', $node) as $ln) { $ln->parentNode->removeChild($ln); }
foreach ($xpath->query('.//script', $node) as $s) {
$s->parentNode->removeChild($s);
}
}
function collect_and_inline_css_simple($dom, $baseUrl) {
$xpath = new DOMXPath($dom);
$cssParts = [];
foreach ($xpath->query('//style') as $styleNode) {
$cssParts[] = $styleNode->nodeValue;
}
foreach ($xpath->query('//link[@rel="stylesheet"]') as $linkNode) {
$href = $linkNode->getAttribute('href');
if (!$href) continue;
$full = resolve_url($baseUrl, $href);
$res = wp_remote_get($full, ['timeout'=>15]);
if (!is_wp_error($res)) {
$css = wp_remote_retrieve_body($res);
$css = css_fix_urls($css, $full);
$cssParts[] = $css;
}
}
$all = implode("n", $cssParts);
return $all ? "<style>n{$all}n</style>" : '';
}
function collect_needed_scripts($url, $xpath) {
$scriptContent = [];
foreach ($xpath->query('//script[@src]') as $s) {
$src = $s->getAttribute('src');
if (!$src) continue;
$full = resolve_url($url, $src);
if (strpos($full, 'jquery') !== false ||
strpos($full, 'avada') !== false ||
strpos($full, 'fusion') !== false) {
$res = wp_remote_get($full, ['timeout'=>15]);
if (!is_wp_error($res)) {
$code = wp_remote_retrieve_body($res);
if ($code) {
$scriptContent[] = "n/* Script: {$full} */n" . $code;
}
}
}
}
foreach ($xpath->query('//script[not(@src)]') as $s) {
$code = trim($s->nodeValue);
if ($code) {
$scriptContent[] = "n/* Inline Script */n" . $code;
}
}
$all = implode("n", $scriptContent);
return $all ? "<script>n{$all}n</script>" : '';
}
function page_json($request) {
$lang = $request->get_param('lang');
$url = get_lang_url($lang);
$dom = get_clean_dom($url);
if (is_wp_error($dom)) {
return ['error' => 'DOM error'];
}
$xpath = new DOMXPath($dom);
$headerNode = $xpath->query('//header')->item(0);
$footerNode = $xpath->query('//footer')->item(0);
$styleBlock = collect_and_inline_css_simple($dom, $url);
$allScripts = collect_needed_scripts($url, $xpath);
if ($headerNode) remove_links_and_scripts($dom, $headerNode);
if ($footerNode) remove_links_and_scripts($dom, $footerNode);
$headerHtml = $headerNode ? $dom->saveHTML($headerNode) : '';
$footerHtml = $footerNode ? $dom->saveHTML($footerNode) : '';
$finalHeader = $styleBlock . "n" . $headerHtml . "n" . $allScripts;
return [
'header' => $finalHeader,
'footer' => $footerHtml
];
}
What am I doing wrong here?
