HUBS 웹사이트 작업내역 & 권고사항 (백업)

문서 소개

본 문서는 HUBS 웹사이트 유지보수/기능개선 작업내역과, 작업과정에서 발견한 문제점을 개선할 권고사항을 담습니다. 작업 편의상 경어체는 생략합니다.

*본 게시물의 스크린샷은 폰트가 HUBS 웹사이트 기본 웹폰트 ‘본고딕’이 ‘돋움’으로 대체되어 보입니다. 작업자가 인터넷 환경이 좋지 않은 군부대에서 작업을 진행해 그런 것이니 걱정하지 않아도 됩니다. 일반적인 환경에서는 본고딕으로 제대로 표시될 것입니다.

2017.12.06 56기 성시호 문서생성.


작업내역

2018.03.17

  1. 기능 추가 : 라디오/잠깐퀴즈 조회시 프로그램 커버를 제목 하단에 자동으로 표시하도록 수정
    *과거에 업로드된 라디오/잠깐퀴즈 게시물 모두 적용되는 옵션임
    *설치된 플러그인 : Featured Image(자동번역 : ‘특성 이미지’)
    *function.php에서 genesis_entry_header(제목부)에 위젯영역을 추가(‘Content Top’)하는 코드 삽입했음. 해당 영역에 Featured Image 위젯을 삽입했으며, 해당 위젯은 Dynamic Widgets 옵션상 RADIO, 잠깐퀴즈 Single Post에 대해서만 활성화되어 있음.

2018.03.01

  1. PHP 수정 : 웹브라우저 탭 제목이 ‘한양대학교 교육방송국 HUBS’로만 고정되는 문제 해결
    조회 중인 페이지 명칭이 앞에 표시되도록 수정.
    (ex. [프라임] 제46대 총학생회 선거 알아보기 :: 한양대학교 교육방송국 HUBS)

    * 대상 파일 : 테마 function.php
    * 주석처리한 대상 코드 : $title = get_bloginfo( ‘name’ );

2018.02.24

Secondary Sidebar가 적용된 모습

  1. 설정 변경 : Secondary Sidebar 활성화★
    알림판 – Genesis – Theme Settings에서 Default Layout을 ‘Secondary Sidebar – Content – Primary Sidebar’로 변경했음. Secondary Sidebar는 Primary Sidebar와 같은 위젯구역이므로 그림이나 링크 등 위젯 요소를 자유롭게 삽입할 수 있음. 현재는 사용자가 조회 중인 화면(뉴스,TV,라디오…)에 맞는 ‘메뉴’가 표시되도록 설정되어 있음.

    Tablet 해상도에서 적용되는 화면. (좌) 변경 전. (우) 변경 후

  2. PHP/CSS 수정 : Phone/Tablet 해상도에서 Sidebar 표시순서 및 형태 변경
    (*좌측에 Secondary Sidebar를 추가하기 위한 준비작업임)
    (*News Pro Theme의 부모테마인 Genesis Theme의 sidebar.php 수정했음)
    (*News Pro Theme의 style.css 내 media queries 부분에 코드 수정했음)

    1. Phone 해상도(가로 600px 이하)에서 Sidebar 표시순서 변경
      1. 변경 전 : Sidebar가 모두 본문 아래로 Width 100% 처리되어 Primary-Secondary 순으로 표시됨
      2. 변경 후 : Sidebar가 모두 본문 아래로 Width 100% 처리되어 Secondary-Primary 순으로 표시됨
    2. Tablet 해상도(가로 600px 초과 1023px 이하)에서 Sidebar 처리방법 변경
      1. 변경 전 : Sidebar가 모두 본문 아래로 Width 100% 처리되어 Primary-Secondary 순으로 표시됨.
        (*Phone 세팅과 동일했음)
      2. 변경 후 : Sidebar가 모두 본문 아래로 내려가고, Width 각각 50%처리되어 양쪽에 표시됨.
        이 때 좌측에 Secondary Sidebar, 우측에 Primary Sidebar 순으로 배치됨.

위 내용은 기술적 문제점을 해결한 후 다시 활성화시킬 예정임. Primary-Secondary에 포함된 컨텐츠 길이의 차이가 크면 페이지 레이아웃 전체가 깨지는 문제가 있음.

2018.02.18

  1. 기능 추가 : Secondary Sidebar에 작성자의 프로필사진을 표시할 수 있는 플러그인 및 위젯 추가.
    *설치된 플러그인 : WordPress User Avatar
    *Wordpress에는 사용자 프로필 사진(Avatar)을 표시하는 ‘Gravatar’ 기능이 있으나, 세팅 번거롭고 로딩속도가 느린 문제점이 있어 사용하지 않음. 로컬에서 Avatar를 처리하는 플러그인으로 대체.

위 내용(프로필 사진)은 일단 사이트 전체에 적용하지 않은 상태이며, 샘플을 보여주기 위해 ‘성시호 기자’ 게시물에만 적용된 상태임. 방송국 내에서 프로필 사진 사용 여부와 적용범위에 대해 합의가 이뤄지면 정식으로 활성화하겠음.

2018.02.11

위젯 게시물 ‘…’ 처리 적용 전(좌), 적용 후(우). 이미지상 가장 아래쪽 게시물 제목 참조. 제목이 길어 2줄이 되는 게시물은 자동으로 (…)처리됨.

  1. CSS 수정 : 위젯에서 게시물 제목이 너무 긴 경우 ‘…'(Ellipsis)처리
    게시물 제목이 위젯 상에 2줄로 표시되어 위젯 전체의 길이를 불규칙하게 늘어뜨리고 레이아웃을 깨뜨리는 문제점 해결.

    .featured-content .entry-title 클래스 대상
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  2. CSS 수정 : Contents(본문) 영역 가로폭 50px 확장 및 Primary Sidebar(우측 사이드바) 영역 50px축소
    향후 Secondary Sidebar(좌측 메뉴바) 추가를 위한 준비임. Secondary Sidebar를 활성화시킬 경우, 좌측 Contents 영역의 폭을 차지하기 때문에 Primary Sidebar를 일부 줄이는 조치가 필요함.
  3. PHP 수정 : 썸네일 사이즈 수정
    위의 ‘Contents 영역 가로폭 확장’과 연관된 조치임. Contents영역 가로폭이 늘어나면서 해당 영역에 들어가는 위젯의 썸네일 이미지 사이즈도 조정이 필요하게 되었음. 조정이 필요한 항목은 Home-top과 Home-middle임.
    위젯에 사용하는 썸네일 사이즈는 테마의 functions.php에 선언하도록 되어있음. 기존 home-top(720×400), home-middle(348×150)은 각각 home-top-HUBS(787×442), home-middle-HUBS(372×209)로 새로 선언한 뒤, 각각의 위젯에 새로 적용하였음. 기존 사이즈 항목도 일단 유지한 상태이니 참고 바람.

    Image Size에 home-top-HUBS 항목이 추가되었음

2018.02.03

  1. 기능 추가 : 각 위젯별로 표시조건 설정기능 추가
    위젯 구역에 삽입되는 개개의 위젯에 대해 표시조건을 설정할 수 있게 되었음.
    * 설치된 플러그인 : Dynamic Widgets
  2. 기능 추가 : 각 섹션별 인기 게시물 리스트 추가
    Primary Sidebar(우측 사이드바)에 각 섹션(NEWS, TV,RADIO)별로 인기있는 게시물을 뽑아 리스트로 보여주는 위젯 추가. 페이지 조회수 기준으로 리스트를 구성함.
    * 설치된 플러그인 : WordPress Popular Posts

2018.01.21

좌측 창 : 변경 전, 우측 창 : 변경 후

  1. CSS 수정 : 사이드바 위젯 제목부 아래 여백 삭제
    위젯 제목부의 margin-bottom: 24px; 해제. 위젯 내용과 과도한 간격이 생기는 문제를 야기함.
  2. CSS 수정 : 사이드바 위젯에 목록(ul) 탑재할 경우 표시되는 글머리표(‘>’) 삭제
    좌측 공간을 과도하게 잡아먹고, 타 위젯과 통일성 있는 항목 정렬에 문제를 야기함. 현재 웹사이트에서 사용되고 있는 기능은 아니나, 차후 사이드바의 기능추가를 위해 미리 작업함.
    (*현재 표시된 스크린샷은 이해를 돕기 위해 framerlab.com 화면을 캡쳐했음)

2018.01.20

  1. CSS 수정 : 창 크기가 1188px 이하로 줄어들 경우 Genesis Tabs가 깨지는 현상 해결
    CSS 파일 내 media queries 1188px 코드 끝부분에 Genesis Tabs 관련 CSS를 직접 조작하는 코드를 삽입하는 방식으로 해결하였음. 단, Genesis Tabs 아래쪽 끝부분 여백이 늘어나는 현상에 대해서는 아직 원인 규명 중.

2018.01.16

  1. CSS 수정 : 웹폰트 로딩 경로 변경 (카페24 서버 내장)
    기존에는 사이트 기본 폰트 ‘본고딕’을 구글 서버에서 끌어왔음. 그러나 접속자의 회선이 구글 서버와 제대로 연결이 되지 않을 경우 웹폰트 로딩이 지연되고, 결과적으로 전체 페이지가 느리게 뜨는 현상이 발생함. 이에 따라 웹폰트 파일을 HUBS의 CAFE24 웹서버에 내장시켰음.
    * FTP상 경로는 www/notosanskr 폴더에 있음.

2018.01.08

좌측 창: 변경 전, 우측 창: 변경 후

  1. CSS 수정 : 문단 정렬 기준 변경
    문단 정렬 기준을 변경하였음. 위 스크린샷과 같이 문단이 좌우로 가지런하게 정렬할 수 있게 되었음(문단의 오른쪽을 자세히 볼 것)

    .entry-content 클래스 대상 속성 적용
    text-align: justify;
    word-break: normal;
    word-wrap: break-word;

2018.01.06

2018.01.06 작업 결과. 게시물 제목 주변의 구성이 변화했음.

  1. Breadcrumbs 제거 : 포스트, 페이지 대상
    포스트와 페이지를 조회할 때 간혹 경로 표시 에러가 발생하고, 불필요하게 제목 표시를 반복하는 Breadcrumbs 제거. 카테고리 표시는 게시물 제목 하단에 표시되는 (날짜) / (작성자) 표시 옆에 옮기는 것으로 대체. 아래 2,3번 항목 참조.
    단, 카테고리별로 게시물을 호출하는 Archive 메뉴에서는 Breadcrumbs가 계속 표시됨.
    * 과거에 있었던 웹사이트 관련 문제 제기를 뒤늦게 반영하여 수정합니다. 다만 보는 사람마다 Breadcrumbs가 지저분해서 없애야 할지, 기능적인 측면을 감안해서 그대로 둬야 할지 요즘엔 또 의견이 갈릴 수 있을 것이라고 생각되는데… 요청하시면 다시 복구해드리겠습니다.
  2. Genesis Simple Edits 수정 : 날짜·작성자 옆에 카테고리 추가
    각 게시물 페이지에서 제목 아래에 (날짜) / (작성자) / (편집버튼)을 (카테고리) / (날짜) / (작성자) / (편집버튼)으로 수정했음.
    이를 위해 Genesis Simple Edits 메뉴의 Entry Meta (above content) 항목을 수정했음.
    -변경 전 : <post_date> By <post_author_posts_link> <post_comments> <post_edit>
    -변경 후 : <post_categories before=”” sep=”&nbsp;&#47;”> / <post_date> / <post_author_posts_link> <post_edit>
    **주의1 : short code를 글로 표시하기 위해 이 게시물에서는 대괄호[ ]를 꺾쇠< >로 기재했음. 실제로는 대괄호[ ]를 사용해야 제대로 동작함.
    **주의2 : ★★향후 국장, 인터넷 방송부장, 주간교수 교체로 인해 Genesis Simple Edits를 통해 사이트 하단 텍스트(Footer Output)를 수정할 때마다, ‘변경 후’란의 Entry Meta 코드를 함께 대괄호 처리한 후 붙여넣을 것. 텍스트 인코딩 문제로 인해 공백과 /(슬래시)를 입력할 경우 제대로 표시되지 않는 문제가 있음.
  3. Genesis Simple Edits 수정 : 게시물 하단의 불필요한 카테고리·태그정보 삭제
    이미 게시물 상단에 표시되기 때문에 필요 없음.
    이를 위해 Genesis Simple Edits 메뉴의 Entry Meta (below content) 항목을 수정했음.
    -변경 전 : Filed Under: 미분류, 작성중
    -변경 후 : (공란)
  4. CSS 수정 : .entry-categories, .entry-tags 클래스 inline속성으로 변경
    2번 항목 작업과 연계된 조치. 기존 속성은 block 속성이며, block을 그대로 적용할 경우 (카테고리) / (날짜) / (작성자) / (편집버튼) 표시부분이 2줄로 나오는 문제가 발생함.

2017.12.17

  1. CSS 수정 : 모바일 메인에서 Genesis Tabs 게시물 제목부 배경이 아래쪽으로 남는 문제 해결

    게시물 제목 아래쪽에 검은색 공간이 남지 않게 됨

  2. CSS 수정 : 모바일 화면에서 웹사이트 상단 로고가 좌우로 튀어나오는 문제 해결
    레이아웃상 버그 해결.
  3. CSS 수정 : 순서없는 목록(ul) 항목 기호 변경
    원(●)에서 사각형(■)으로 변경.
  4. CSS 수정 : 대체 폰트 ‘돋움’으로 변경
    대체폰트란, 웹사이트 기본 폰트인 Noto Sans KR이 네트워크 장애(구글서버 연결 오류 등)제대로 로드되지 않았을 경우 대신 표시되는 서체를 말함. 그간 ‘굴림’으로 설정되어 있었으나, 심미성과 가독성 향상을 위해 ‘돋움’으로 변경. iOS 환경에서는 해당사항 없음.

    구글 서버 접속장애로 대체폰트가 로딩된 화면

  5. CSS 수정 : 제목(h1~6) 줄 간격 변경
    게시물을 읽을 때, 제목이 2줄 이상으로 늘어날 경우 줄 간격이 너무 좁게 설정되어 있어 윗줄과 아랫줄이 바싹 붙어보이는 문제점을 해결했음. *line-height : 1 에서 1.2로 수정.
  6. CSS 수정 : 본문(p), 제목(h1~6) 서체 색상 변경
    본문의 경우 기존의 회색(#666)보다 조금 더 진한 진회색(#444)로 변경. 제목의 경우 기존의 완전 검정(#000)보다 조금 연한 진회색(#222)로 변경. 본문보다 제목이 미세하게 조금 더 진함.
  7. CSS 수정 : 인용 태그 (blockquote) 디자인 변경

인용 예제. 이렇게 표시됩니다. 문서편집창에서는 보이지 않지만 실제 문서에서는 해당 문단에 옆선이 생깁니다. 본문 중간에 인용하고 싶은 말을 이 태그로 표시합니다. 주로 뉴스 인터뷰 내용(사운드바이트)을 표시할 때 사용하게 될 겁니다.

<성시호 / 미디어커뮤니케이션학과 14>
웹사이트 유지보수라는건 파다보면 정말 끝이 없다는 것을 깨닫게 됩니다. 그래도 제가 시작한 프로젝트니 힘 닿는 대로 끝까지 지원할게요.

2017.12.06

  1. 기능 추가 : 미디어 라이브러리 편의성 개선
    라디오방송을 업로드할 때마다 커버이미지를 찾아 라이브러리 전체를 헤매는 일을 방지하기 위해, 각 미디어파일(이미지)별로 카테고리를 부여할 수 있게 변경했음. 글을 쓸 때 특성이미지 설정 – ‘View all categories’를 ‘특성이미지-라디오커버’로 선택해 카테고리 필터를 적용하면 쉽게 이미지를 찾을 수 있음.
    * 나머지 이미지(행당뉴스, 정규영상..)들은 파일을 일회적으로 사용하는 경우가 많아 따로 카테고리를 생성하지는 않았음.
    * 설치된 플러그인 : Media Library Categories Premium

권고사항

2017.12.06

  1. 미디어파일(이미지..) 업로드시 파일명을 알아볼 수 있게 작성하기
    향후 유지보수 작업에 지장을 초래할 가능성이 큼
  2. 신규 라디오프로그램 커버이미지 업로드시, 파일에 ‘특성이미지-라디오커버’ 카테고리 지정
    여러 개의 파일에 카테고리를 지정할 때는 ‘일괄 작업’을 활용하면 효율적으로 작업할 수 있음.