100% 높이를 파괴하는 Wordpress 관리자 표시줄을 수정하는 방법
워드프레스로 화면에 맞는 웹사이트를 만들고 있습니다.
사이트 소유자가 로그인하면 관리자 표시줄이 나타나지만 다음 스타일이 추가됩니다.
html{ margin-top: 28px !important; }
그러면 세로 스크롤 막대가 나타납니다.CSS만 사용해서 이것을 고칠 수 있는 방법이 있습니까?
어떤 분이 비슷한 문제가 있었는데 답변을 받지 못했습니다.
나의 관련 html 구조:
<html>
<body>
<div id="page">
<div class="site-main" id="main">
<div class="content-area" id="primary">
<div role="main" class="site-content" id="content">
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
</div><!-- #main .site-main -->
</div><!-- #page -->
<div id="wpadminbar">
</div>
</body>
</html>
관련 CSS:
html, body, #page {
width: 100%;
height: 100%;
min-width: 350px;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
#primary {
float: right;
width: 100%;
margin-left: -200px;
height: 100%;
}
#content {
margin-left: 250px;
height: 100%;
}
관리자 표시줄의 경우:
#wpadminbar {
height: 28px;
left: 0;
min-width: 600px;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
(부정적인) 여백과 패딩을 사용하고 관리자 표시줄의 설정도 시도했습니다.position로.absolute대신에fixed하지만 운이 없습니다.
여기 2022.
최근에 WordPress가 관리자로 로그인할 때 프론트엔드에 관련 CSS 변수를 설정하고 있다는 것을 알게 되었습니다.
html {
--wp-admin--admin-bar--height: 32px;
scroll-padding-top: var(--wp-admin--admin-bar--height);
}
@media screen and (max-width: 782px)
html {
--wp-admin--admin-bar--height: 46px;
}
}
이는 다음과 같은 작업을 수행할 수 있기 때문에 매우 편리합니다(영웅 요소를 뷰포트만큼 높게 만들지만 관리자 표시줄의 높이는 빼십시오).
.hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
하지만 약간의 문제가 있습니다.관리자로 로그인하지 않은 경우 CSS 변수가 설정되지 않아 계산과 같은 문제가 발생할 수 있습니다.
이 문제는 WordPress에서 설정하는 본문 클래스를 확인하여 해결할 수 있습니다.
.hero {
min-height: 100vh;
}
body.admin-bar .hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
…하지만 이 문제는 상당히 빠르게 해결될 수 있기 때문에, 저는 아마도 많이 사용할 수 있는 작은 단일 크기 솔루션을 생각해 냈습니다.
body:not(.admin-bar) {
--wp-admin--admin-bar--height: 0px;
}
이를 통해 다음과 같은 작업을 수행할 수 있으며 사용자가 로그인했는지 여부에 대해 걱정할 필요가 없습니다.
.site-header {
top: var(--wp-admin--admin-bar--height);
}
들여다보기wordpress/wp-includes/class-wp-admin-bar.php처음에, 그리고 당신은 이것을 발견할 것입니다.댓글을 자세히 보고 실제 답변을 확인합니다.
if ( current_theme_supports( 'admin-bar' ) ) {
/**
* To remove the default padding styles
* from WordPress for the Toolbar,
* use the following code:
* add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
*/
$admin_bar_args = get_theme_support( 'admin-bar' );
$header_callback = $admin_bar_args[0]['callback'];
}
if ( empty($header_callback) )
$header_callback = '_admin_bar_bump_cb';
add_action('wp_head', $header_callback);
wordpress/wp-includes/admin-bar.php의 기본 구현을 포함합니다._admin_bar_bump_cb:
/**
* Default admin bar callback.
*
* @since 3.1.0
*/
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
<?php
}
php 코드(관리자 표시줄을 표시하지 않을 페이지)에서 다음을 추가합니다.
add_filter('show_admin_bar', '__return_false');
다음을 참조하십시오. http://davidwalsh.name/hide-admin-bar-wordpress
다음을 시도해 보십시오.
add_action('get_header', 'fix_adminbar');
function fix_adminbar()
{
if (is_admin_bar_showing()) {
remove_action('wp_head', '_admin_bar_bump_cb');
add_action(
'wp_head', function () {
ob_start();
_admin_bar_bump_cb();
$code = ob_get_clean();
$code = str_replace('margin', 'padding', $code);
$code = preg_replace('/{/', '{ box-sizing: border-box;', $code, 1);
echo $code;
}
);
}
}```
언급URL : https://stackoverflow.com/questions/20125664/how-to-fix-wordpress-admin-bar-destroying-100-height
'programing' 카테고리의 다른 글
| 분리된 HEAD 상태에서 생성된 Git 커밋은 어떻게 됩니까? (0) | 2023.07.10 |
|---|---|
| 이 3차 조건부입니까?: 올바른(목표) C 구문입니까? (0) | 2023.07.10 |
| 실제로 먼저 병합하지 않고 병합을 테스트하는 방법 (0) | 2023.07.10 |
| Git 병합 오류 " 병합되지 않은 파일이 있으므로 커밋할 수 없습니다." (0) | 2023.07.10 |
| Firestore 쿼리 문서 시작끈 포함 (0) | 2023.07.10 |