JavaScript — HTML в тему WordPress

HTML в тему WordPress

Мне нужно сделать фиксированный нижний колонтитул в моей сети WordPress, с некоторыми кнопками, включая js с поповером. У меня есть тема колонны, и мне нужно только внести это изменение. Мне нужно положить его в мой footer.php. Но когда я пытаюсь, ничего не работает. Я не знаю, если это лучший способ сделать это. Вот код, который я делаю для нижнего колонтитула:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"{amp}gt; {amp}lt;!-- Styles just for demo --{amp}gt; {amp}lt;style{amp}gt; @font-face { font-family: 'social-icons'; font-weight: normal; font-style: normal; src: url('font/social.eot?44259375'); src: url('font/social.eot?44259375#iefix') format('embedded-opentype'), url('font/social.woff?44259375') format('woff'), url('font/social.ttf?44259375') format('truetype'), url('font/social.svg?44259375#social') format('svg'); } /* Share button ***********************************************/ .need-share-button { position: relative; display: inline-block; } .need-share-button_dropdown { position: absolute; z-index: 10; visibility: hidden; overflow: hidden; width: 240px; -webkit-transition: .3s; transition: .3s; -webkit-transform: scale(.1); -ms-transform: scale(.1); transform: scale(.1); text-align: center; opacity: 0; -webkit-border-radius: 4px; border-radius: 4px; } .need-share-button-opened .need-share-button_dropdown { visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .need-share-button_link { display: inline-block; width: 40px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } .need-share-button_link:after { font: normal normal normal 16px/1 'social-icons'; text-align: center; text-transform: none; speak: none; } .need-share-button_link:hover { -webkit-transition: .3s; transition: .3s; opacity: .7; } /* Dropdown position ***********************************************/ .need-share-button_dropdown-top-center { bottom: 100%; left: 50%; margin-bottom: 10px; } /* Default theme ***********************************************/ .need-share-button-default .need-share-button_button { display: inline-block; margin-bottom: 0; padding: 20px; font-size: 14px; line-height: 1.42857143; font-weight: 400; color: white; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; vertical-align: middle; white-space: nowrap; background-image: url("share.png") no-repeat; } .need-share-button-default .need-share-button_button span { background-image: url("share.png") no-repeat; } .need-share-button-default .need-share-button_button:hover { color: #737373; } /* Network buttons ***********************************************/ .need-share-button_mailto { color: #efbe00; } .need-share-button_mailto:after { content: 'e80a'; } .need-share-button_mailto.need-share-button_link-box { color: #fff; background: #efbe00; } .need-share-button_twitter { color: #00acec; } .need-share-button_twitter:after { content: 'e813'; } .need-share-button_twitter.need-share-button_link-box { color: #fff; background: #00acec; } .need-share-button_facebook { color: #3b5998; } .need-share-button_facebook:after { content: 'e80e'; } .need-share-button_facebook.need-share-button_link-box { color: #fff; background: #3b5998; } .wrapper { text-align: center; } footer { background-color: black; position: fixed; bottom: 0; width: 100%; left: 0; height: 60px; } footer .col-sm { text-align: center; } a { color: white; text-decoration: none; } footer .col-sm {amp}gt; span { padding: 7px 0 0px; display: inline-block; } footer .col-sm {amp}gt; span {amp}gt; a:hover { color: #737373; text-decoration: none; } #homefooter a{ background-image: url("home.png"); background-repeat: no-repeat; padding-bottom: 35px; } #donarfooter a { background-image: url("donar.png"); background-repeat: no-repeat; padding-bottom: 35px; } footer a span { visibility: hidden; } /* ------------------------------------ MEDIA QUERIES -------------------------------------------*/ @media (max-width: 900px){ footer .col-sm { width: 25%; } footer span { padding: 0 !important; } } /* ------------------------------------ MEDIA QUERIES -------------------------------------------*/ /* ------------------------------------ SEARCH STYLES -------------------------------------------*/ * { box-sizing: border-box; } .openBtn { background: #f1f1f1; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer; } .openBtn:hover { background: #bbb; } .overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); } .overlay-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; } .overlay .closebtn:hover { color: #ccc; } .overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlay input[type=text]:hover { background: #f1f1f1; } .overlay button { float: left; width: 20%; padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .overlay button:hover { background: #bbb; } /* ------------------------------------ SEARCH STYLES -------------------------------------------*/ {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;section{amp}gt; {amp}lt;div id="myOverlay" class="overlay"{amp}gt; {amp}lt;span class="closebtn" onclick="closeSearch()" title="Close Overlay"{amp}gt;×{amp}lt;/span{amp}gt; {amp}lt;div class="overlay-content"{amp}gt; {amp}lt;form action="/action_page.php"{amp}gt; {amp}lt;input type="text" placeholder="Search.." name="search"{amp}gt; {amp}lt;button type="submit"{amp}gt;{amp}lt;i class="fa fa-search"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;footer class="fixed-bottom"{amp}gt; {amp}lt;div class="container-fluid" style="height: 100%"{amp}gt; {amp}lt;div class="row" style="height: 100%"{amp}gt; {amp}lt;div class="col-sm" id="homefooter"{amp}gt; {amp}lt;span{amp}gt; {amp}lt;a href="google.com"{amp}gt;{amp}lt;span{amp}gt;HOME{amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-sm" style="height: 100%; border-left: solid 0.5px white; border-right: solid 0.5px white"{amp}gt; {amp}lt;div class="wrapper"{amp}gt; {amp}lt;img src="share.png"{amp}gt; {amp}lt;div id="share-button-2" class="need-share-button-default" data-share-position="topCenter" data-share-icon-style="box" data-share-networks="Mailto,Twitter,Facebook"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-sm" id="donarfooter"{amp}gt; {amp}lt;span{amp}gt; {amp}lt;a href="google.com"{amp}gt;{amp}lt;span{amp}gt;CONTRIBUIR{amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-sm" id="donarfooter"{amp}gt; {amp}lt;span{amp}gt; {amp}lt;button class="openBtn" onclick="openSearch()"{amp}gt;BUSCAR{amp}lt;/button{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/footer{amp}gt; {amp}lt;script{amp}gt; /*********************************************** needShareButton - Version 1.0.0 - Copyright 2015 Dzmitry Vasileuski - Licensed under MIT (http://opensource.org/licenses/MIT) ***********************************************/ (function() { // share dropdown class window.needShareDropdown = function(elem, options) { // create element reference var root = this; root.elem = elem; root.elem.className  = root.elem.className.length ? ' need-share-button' : 'need-share-button'; /* Helpers ***********************************************/ // get title from html root.getTitle = function() { var content; // check querySelector existance for old browsers if (document.querySelector) { if (content = document.querySelector('meta[property="og:title"]') || document.querySelector('meta[name="twitter:title"]')) { return content.getAttribute('content'); } else if (content = document.querySelector('title')) { return content.innerText; } else return ''; } else { if (content = document.title) return content.innerText; else return ''; } }; // get image from html root.getImage = function() { var content; // check querySelector existance for old browsers if (document.querySelector) { if (content = document.querySelector('meta[property="og:image"]') || document.querySelector('meta[name="twitter:image"]')) { return content.getAttribute('content'); } else return ''; } else return ''; }; // get description from html root.getDescription = function() { var content; // check querySelector existance for old browsers if (document.querySelector) { if (content = document.querySelector('meta[property="og:description"]') || document.querySelector('meta[name="twitter:description"]') || document.querySelector('meta[name="description"]')) { return content.getAttribute('content'); } else return ''; } else { if (content = document.getElementsByTagName('meta').namedItem('description')) return content.getAttribute('content'); else return ''; } }; // share urls for all networks root.share = { 'mailto' : function() { var url = 'mailto:?subject='   encodeURIComponent(root.options.title)   '{amp}amp;body=Thought you might enjoy reading this: '   encodeURIComponent(root.options.url)   ' - '   encodeURIComponent(root.options.description); window.location.href = url; }, 'twitter' : function() { var url = root.options.protocol   'twitter.com/home?status='; url  = encodeURIComponent(root.options.title)   encodeURIComponent(root.options.url); root.popup(url); }, 'facebook' : function() { var url = root.options.protocol   'www.facebook.com/sharer/share.php?'; url  = 'u='   encodeURIComponent(root.options.url); url  = '{amp}amp;title='   encodeURIComponent(root.options.title); root.popup(url); }, } // open share link in a popup root.popup = function(url) { // set left and top position var popupWidth = 500, popupHeight = 400, // fix dual screen mode dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left, dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top, width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width, height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height, // calculate top and left position left = ((width / 2) - (popupWidth / 2))   dualScreenLeft, top = ((height / 2) - (popupHeight / 2))   dualScreenTop, // show popup shareWindow = window.open(url,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width='   popupWidth   ', height='   popupHeight   ', top='   top   ', left='   left); // Puts focus on the newWindow if (window.focus) { shareWindow.focus(); } } /* Set options ***********************************************/ // create default options root.options = { shareButtonClass: false, // child selector of custom share button iconStyle: 'default', // default or box boxForm: 'horizontal', // horizontal or vertical position: 'bottomCenter', // top / middle / bottom   Left / Center / Right buttonText: 'COMPARTIR', protocol: ['http', 'https'].indexOf(window.location.href.split(':')[0]) === -1 ? 'https://' : '//', url: window.location.href, title: root.getTitle(), image: root.getImage(), description: root.getDescription(), networks: 'Mailto,Twitter,Facebook' } // integrate data attribute options for (var option in root.elem.dataset) { // replace only 'share-' prefixed data-attributes if (option.match(/share/)) { var new_option = option.replace(/share/, ''); if (!new_option.length) { continue; } new_option = new_option.charAt(0).toLowerCase()   new_option.slice(1); root.options[new_option] = root.elem.dataset[option]; } } // convert networks string into array root.options.networks = root.options.networks.toLowerCase().split(','); /* Create layout ***********************************************/ // create dropdown button if not exists if (root.options.shareButtonClass) { for (var i = 0; i {amp}lt; root.elem.children.length; i  ) { if (root.elem.children[i].className.match(root.options.shareButtonClass)) root.button = root.elem.children[i]; } } if (!root.button) { root.button = document.createElement('span'); root.button.innerText = root.options.buttonText; root.elem.appendChild(root.button); } root.button.className  = ' need-share-button_button'; // show and hide dropdown root.button.addEventListener('click', function(event) { event.preventDefault(); if (!root.elem.className.match(/need-share-button-opened/)) { root.elem.className  = ' need-share-button-opened'; } else { root.elem.className = root.elem.className.replace(/s*need-share-button-opened/g,''); } }); // create dropdown root.dropdown = document.createElement('span'); root.dropdown.className = 'need-share-button_dropdown'; root.elem.appendChild(root.dropdown); // set dropdown position setTimeout(function() { switch (root.options.position) { case 'topCenter': root.dropdown.className  = ' need-share-button_dropdown-top-center'; root.dropdown.style.marginLeft = - root.dropdown.offsetWidth / 2   'px'; break } },1); // fill fropdown with buttons var iconClass = root.options.iconStyle == 'default' ? 'need-share-button_link need-share-button_' : 'need-share-button_link-'   root.options.iconStyle   ' need-share-button_link need-share-button_'; for (var network in root.options.networks) { var link = document.createElement('span'); network = root.options.networks[network]; link.className = iconClass   network; link.dataset.network = network; root.dropdown.appendChild(link); // add share function to event listener link.addEventListener('click', function() { root.share[this.dataset.network](); }); } } })(); {amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; new needShareDropdown(document.getElementById('share-button-2')); {amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function openSearch() { document.getElementById("myOverlay").style.display = "block"; } function closeSearch() { document.getElementById("myOverlay").style.display = "none"; } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector