Tạo bài viết Side Menu Fixed
trong UX Blocks
Tạo Side Menu Fixed Field
trong Custom Fields
Cấu trúc json để import
markup
Donate
[
{
"key": "group_5ee721564d249",
"title": "Side Menu Fixed Field",
"fields": [
{
"key": "field_5ee721dd5c42b",
"label": "Side Menu Fixed",
"name": "side_menu",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 0,
"max": 0,
"layout": "row",
"button_label": "",
"sub_fields": [
{
"key": "field_5ee7390b0decf",
"label": "icon",
"name": "icon",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"preview_size": "medium",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
},
{
"key": "field_5ee739370ded0",
"label": "title",
"name": "title",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5ee739540ded1",
"label": "link",
"name": "link",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"maxlength": "",
"placeholder": "",
"prepend": "",
"append": ""
},
{
"key": "field_5ee7425204185",
"label": "target",
"name": "target",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 1,
"ui_on_text": "New window",
"ui_off_text": "Same window"
}
]
}
],
"location": [
[
{
"param": "post",
"operator": "==",
"value": "2983"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "left",
"instruction_placement": "label",
"hide_on_screen": [
"the_content"
],
"active": true,
"description": ""
}
]
Thêm vào Footer bằng hook
wp-content\themes\flatsome-child\change\structure\structure-footer.php
php
Donate
<?php
add_action("wp_footer", "side_menu_fixed");
function side_menu_fixed()
{
$queried_post = get_page_by_path('link-icon-fixed', OBJECT, 'blocks');
if ($queried_post && $queried_post->post_status=="publish"):
?>
<?php if (have_rows('side_menu',$queried_post->ID)): ?>
<ul class="side-menu-fixed">
<?php while (have_rows('side_menu',$queried_post->ID)): the_row();
// vars
$image = get_sub_field('icon',$queried_post->ID);
$title = get_sub_field('title',$queried_post->ID);
$link = get_sub_field('link',$queried_post->ID);
$target = get_sub_field('target',$queried_post->ID);
?>
<li>
<?php if ($link): ?>
<a href="<?php echo $link; ?>" title="<?php echo $title?>" <?php if ($target) echo 'target="_blank"'?>>
<?php endif; ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>"/>
<?php if ($link): ?>
</a>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php endif; ?>
<?php
}
CSS Style
wp-content\themes\flatsome-child\change\assets\css\_footer.scss
scss
Donate
.side-menu-fixed{
position: fixed;
top: 50%;
right: 0;
list-style: none;
z-index: 9999;
transform: translateY(-50%);
li{
a{
background-color: $brown1;
padding: 10px 5px;
text-align: center;
display: block;
&:hover{
opacity: 0.8;
}
}
}
}