포스트에 소스 코드를 넣기 위해서 이용할 수 있는 방법 중 가장 간단한 방법은 pre 태그를 사용하는 것이다.
아래의 pre 태그를 워드프레스 CSS에 넣으면 된다.
article pre {
background:#f5f5f5;
border:1px #eee solid;
border-top:20px #eee solid;
font-family:Consolas, courier;
font-size:0.9em;
white-space:pre;
overflow-x:auto;
}
출처: https://webdevblog.com/display-code-wordpress/
ES 법률사무소의 홈페이지는 워드프레스(WordPress)를 이용하여 만들어졌습니다.
워드프레스는 CMS(Contents Management System)의 일종으로, 전 세계 홈페이지의 약 30%가 워드프레스로 만들어졌다고 합니다.
ES 법률사무소의 홈페이지를 만들고 운영하면서 문서화도 할 겸 그와 관련된 내용에 대해 포스팅하겠습니다.
워드프레스의 헤더(header) 또는 푸터(footer)에 스크립트(script)를 넣어야 할 경우가 종종 있습니다.
대표적인 경우가 웹 방문자 및 방문과 관련된 통계 서비스를 제공받기 위하여 네이버 애널리틱스 또는 구글 애널리틱스의 트랙킹 코드(tracking code)를 워드프레스 웹에 삽입하는 것입니다.
방문 통계 서비스를 제공하는 플러그인도 있지만 웹을 가볍게 하기 위해서는 트랙킹 코드만 삽입하는 것이 더 좋습니다.
트랙킹 코드를 삽입하는 작업을 도와주는 플러그인도 있지만 가능하면 꼭 필요한 플러그인만 쓰는 것이 좋기 때문에 손수(manually) 트랙킹 코드와 같은 스크립트를 헤더 또는 푸터에 삽입하는
방법을 찾아보았습니다.
아래의 코드를 child-theme의 functions.php에 삽입하는 방식으로 헤더 또는 푸터에 스크립트를 넣을 수 있습니다.
your_function_name은 원하는 함수명으로 바꾸고, ‘스크립트 코드를 여기에’라고 써 있는 부분에 스크립트 코드를 넣으면 됩니다.
(헤더에 삽입하는 경우)
/* 관련 설명 */
add_action(‘wp_head’, ‘your_function_name‘);
function your_function_name() {
?>
스크립트 코드를 여기에
<?php
};
(푸터에 삽입하는 경우)
/* 관련 설명 */
add_action(‘wp_footer’, ‘your_function_name‘);
function your_function_name() {
?>
스크립트 코드를 여기에
<?php
};
출처는 워드프레스 호스팅 서비스를 제공하는 kinsta 페이지입니다.
기존의 상담 안내 메뉴와 상담 예약 메뉴를 하나의 메뉴로 통일하면서 ES 법률사무소 모바일 웹의 상담 예약 페이지에 클릭하면 바로 상담 예약 화면으로 넘어갈 수 있게 하는 버튼을 추가할 필요가 생겼습니다.
이 버튼은 화면의 스크롤에 상관 없이 같은 위치에 있는 것이 바람직하겠죠.
이러한 버튼을 sticky button 또는 sticky widget 이라고 합니다.
아래의 스마트폰 카카오톡 화면의 오른쪽 아래의 붉은 색으로 표시된 동그란 + 아이콘 같은 것이 바로 sticky button입니다.
Sticky button을 위한 CSS를 구글(google)에서 검색하여 아래와 같은 참고자료를 찾았습니다.
.mobileShow { display: none; } /* full width of parent */ .mobileShow img{ width: 100%; } /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .mobileShow { display: block; width: 40%; position: fixed; bottom: 0; left: 50%; margin: 0 0 0 -20%; } }
워드프레스(WordPress)에서 적절한 서클 아이콘을 찾아 ES 법률사무소 웹에 넣은 후 위 CSS를 조금 변형한 후 서클 아이콘에 적용시켜서
아래와 같은 연보라색의 상담 예약 sticky button을 만들었습니다.
모바일 화면을 스크롤해도 같은 위치에 잘 나오고 있음을 확인하였습니다.
ES 법률사무소 모바일 웹에서 ‘메뉴 -> 상담 예약’을 클릭하시거나, 메인 화면에서 ‘상담 예약’ 서클 아이콘을 누르면 연보라색 sticky button을 직접 보실 수 있습니다 🙂
워드프레스는 현재 가장 인기 있는 웹 CMS라 할 수 있습니다.
CMS는 Content Management System의 약자로, 콘텐츠 생성, 변경, 삭제 등의 관리를 도와주는 시스템을 말합니다.
블로그를 만드는 도구 정도로 이해해도 아주 큰 무리는 없겠습니다.
이 ES 법률사무소 비즈니스 웹도 워드프레스를 이용하여 만들어진 것입니다.
워드프레스는 일종의 platform으로서, 다양한 기능의 수 많은 plug-in이 존재합니다.
즉, 원하는 기능의 plug-in을 찾아 설치하면 그 원하는 기능을 쓸 수 있게 됩니다.
Plug-in 마켓 생태계가 꽤 잘 되어 있기 때문에 개발자들은 열심히 다양한 기능의 plug-in을 만들고 있고, 사용자들은 그러한 plug-in을 사용하기만 하면 됩니다.
물론, 유료 plug-in도 있고 그런 plug-in은 구매해서 사용하여야 합니다.
서버-클라이언트 구조와 html, php, css, javascript 등을 어느 정도 알고 있으면 워드프레스를 더 잘 활용할 수 있으나 그렇지 않아도 어느 정도 수준 이상으로 워드프레스를 사용할 수 있습니다.
위에서도 언급하였지만 워드프레스가 기본적으로 웹사이트를 만드는 ‘도구’이기 때문입니다.
앞으로 워드프레스로 만들어진 ES 법률사무소의 비즈니스 웹을 개선하며 그와 관련된 글을 계속 올리겠습니다.