Кликабельный фон на Wordpress
Есть сайт на Wordpress нужно сделать всю область фона кликабельной.
Сайт: http://russian-consumer.ru/ . Вы пишите мне куда вставить код.
-
2 days3 USD
32 2 days3 USD
Здраствуйте, готов приступить к выполнению задания. Но заморачиватса и говорить куда писать код это долго легче скинуть копию сайта мне я все зделаю
-
1 day3 USD
1107 29 0 1 day3 USD
Здравствуйте, Алексей.
Могу приступить к выполнению задания в ближайшее время.
Стоимость - 300р.
С уважением,
Ольга.
-
1 day3 USD
210 3 0 1 day3 USD
Здравствуйте,
Я разработчик WordPress / FrontEnd с 2-летним опытом работы, работая как инженером, так и руководителем команды на различных крупномасштабных платформах.
Я совсем недавно перешел на фриланс, поэтому я был бы признателен, чтобы вы дали мне возможность проявить себя, несмотря на то, что мой профиль сейчас не заполнен. Я могу гарантировать вам быструю и надежную роботу, поверьте мне, вы не пожалеете.
Жду ответа от Вас.
-
На джаваскрипте сгодится ?
-
Здравствуйте. По большому счету неважно, главное чтобы была возможность переодически менять картинку фона и её кликабельность (гиперссылку на ней).
-
В общем я ставку сделал, если устраивает, выбирайте и делаем через сейф.
-
на чистом css без нагрузки на сервер
<!DOCTYPE html>
<html><head>
<style>
html {
min-height: 100%
}
body {
min-height: 100%;
margin:0;
padding:0;
font: 15px Tahoma;
color:#555;
}
p {
margin: 1em 0;
text-align: center;
}
#top {
width:100%;
background: #222;
text-align:center;
height:35px;
line-height:35px;
}
#top a {
color:#00FF00;
text-decoration:none;
}
.logo {
width:200px;
font: 22px/125% Tahoma;
float:left;
line-height:35px;
}
.logo span {
font: 12px/125% Tahoma;
}
.body_slides {
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;
}
.body_slides,
.body_slides:after {
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
.body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;}
100% {
opacity:0;
}
}
.body_slides li {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1) {
background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);
}
.body_slides li:nth-child(2) {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);
}
.body_slides li:nth-child(3) {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);
}
.logo a {
color: #fff;
font-size: 3rem;
}
.logo {
width: 100%;
text-align: center;
padding: 3em 0 0;
}
</style>
</head>
<body id="body">
<ul class="body_slides">
<li></li>
<li></li>
<li></li>
</ul>
<div class="logo"><a href="http://russian-consumer.ru/" target="_blank">RC</a></div>
</body>
</html>
откройте какой-нибудь ваш текстовый редактор, допустим Блокнот, вставте это дело, и сохраните куда-нибудь на компьютер, допустим как rc.html , обязательно чтоб было .html, откройте этот файл в браузере и посмотрите что это такое.
-
1- Если хотел показать себя, то делай уже до конца. (хотя бы в кодепен засунуть это полотно и сюда запостить ссылку)
2- В тз как бы понятно указано, что нужно кликабельным сделать фон, который замещает пространство вокруг блока с основным материалом.
Итог. Данный код никакого отношения к тз не имеет, хоть и неплохое решение для слайдера на цсс.
-
чтоб менять картинки в строку background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg) вместо http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg , т.е. путь к картинке, вставляйте свои изображения.
-
чтобы было всё как нужно сделайте следующее. Я не знаю какой у вас доступ к вашим файлам, через хостинг, а может через ftp, скорей всего так и так. Короче, откройте в вашей теме файл functions.php, и вставте такой код
function background_rc(){
$content='<ul class="body_slides"><li></li><li></li><li></li></ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?> всё что находится между <style></style> вставте в ваш основной css файл, обычно это в самой теме style.css
Хотя что я вам пишу, может вам это и не надо. Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер.
-
Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер.
Я всегда почему то был уверен, что JS выполняется на стороне клиента, и никакой нагрузки на сервер не делает ?
-
function background_rc(){
$content='<ul class="body_slides"><li></li><li></li><li></li></ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?>
Как раз этот кусок кода делает нагрузку на сервер. ( Так как написан на php)
-
слушай, грамотей, объясни ка мне дураку что такое кодепен, первый раз такой бред слышу.
-
Вот как можно было бы показать в работе свой код
https://codepen.io/anon/pen/qyaPPy
Все просто и наглядно, не надо ничего сохранять и создавать, все видно в браузере сразу.
-
<!DOCTYPE html>
<html><head>
<style>
.body_slides {
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;
}
.body_slides,
.body_slides:after {
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
.body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;}
100% {
opacity:0;
}
}
.body_slides li a {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index: 9;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1) a {
background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);
}
.body_slides li:nth-child(2) a {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);
}
.body_slides li:nth-child(3) a {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);
}
</style>
<ul class="body_slides">
<li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>
</ul>
-
тогда
function background_rc(){
$content='<ul class="body_slides">
<li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>
</ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?>
-
Current freelance projects in the category HTML & CSS
Build a page on Elementor ProIt is necessary to build a page from scratch on a WordPress site using the Elementor plugin (Pro version). Desktop version + responsive version for tablet and mobile. We provide the design in Figma. The design document template is in the attachments (desktop version only).… HTML & CSS, Web Programming ∙ 42 minutes back ∙ 24 proposals |
Updating plugins and themes for the WP site putevka.uz"A technical audit of the WordPress site needs to be conducted, checking the relevance, security, and compatibility of the installed plugins and theme. Based on the results, legal options for updating, replacing outdated solutions, or transitioning to officially available… HTML & CSS, PHP ∙ 5 hours 31 minutes back ∙ 30 proposals |
Development of an interactive Palworld map for the websiteWe need to develop an interactive map for Palworld based on the example: https://palworld.gg/map We need not just a static image, but a full-fledged interactive map where users can view locations, toggle object categories on/off, search for specific points, and interact with… HTML & CSS, Javascript and Typescript ∙ 20 hours 33 minutes back ∙ 24 proposals |
Setting up a fabric online store on WordPress + WooCommerce using the Astra template
330 USD
It is necessary to set up and prepare an online store for furniture fabrics for the Norwegian market. The domain, hosting, and WordPress are already installed: eximtextilnordiq.com The site should not be created from scratch and without custom programming, but on the ready-made… Content Management Systems, HTML & CSS ∙ 1 day 1 hour back ∙ 60 proposals |
Rib restaurant-pizzeria websiteThe client side — a dynamic menu with Firebase, categories with tabs, dish cards with photos and prices, support for two sizes (pizza 30/40 cm), responsive mobile design, a sidebar menu with contacts and location. The admin panel — authorization, management of categories and… HTML & CSS ∙ 1 day 5 hours back ∙ 79 proposals |